文章目錄

• videoJS
• 開啟方式
• 記錄
• 初始化
• 居中播放按鈕
• 百度視訊播放器demo
• 開啟方式
• 修改

videoJS

videoJs 文件 https://docs.videojs.com/docs/

實現PC/移動端適應直播，暫停播放出現廣告（哎，萬惡的廣告）

開啟方式

下載此demo，瀏覽器開啟 index.html

記錄

初始化

1. 直接在標籤裡面加上 class="video-js"
   和 data-setup='{}' 屬性。
2. 通過JS初始化

   // 初始化播放器
   var myPlayer = videojs(document.querySelector(".video-js"), {
     controls: true,
     autoplay: false,
     preload: "auto"
   });
   myPlayer.src([{ type: "", src: "" }]); // 播放資源
   myPlayer.poster(”“); // 預覽圖
   myPlayer.ready(function() {
     // 開始播放
     this.on("play", function() {
        // ...
     });
     // 暫停
     this.on("pause", function() {
        // ...
     });
   });
    
   

居中播放按鈕

在 video 標籤中新增 class vjs-big-play-centered

<video class="video-js vjs-big-play-centered" ></video>

在暫停的時候出現播放按鈕，可通過新增樣式

.vjs-paused .vjs-big-play-button {
  display: block;
}

百度視訊播放器demo

官網demo地址: http://cyberplayer.bcelive.com/demo/new/index.html
使用者手冊：https://cloud.baidu.com/doc/MCT/Web-SDK.html#.E4.BC.98.E5.8A.BF

實現PC/移動端適應直播，暫停播放出現廣告（咦，同上demo）

開啟方式

1. 下載此 demo

2. 登陸百度雲管理中心，獲取 Access Key （免費的），登陸地址:https://cloud.baidu.com/?from=console

3. 在此資料夾的 index.html 中填寫你的 Access Key，瀏覽器開啟即可

修改

視訊播放器的圖片廣告寬高為固定的 400 * 300，可能與實際使用不符。此資料夾中的 cyberplayer.js 檔案，相關地方已經被我統一改為變數：

window.ADWIDTH = 400; // 廣告寬度
window.ADHEIGHT = 300; // 廣告高度

可通過修改 window.ADWIDTH 和 window.ADHEIGHT 自定義

原檔案位於 baidu 資料夾中