文章目錄

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

videoJS

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

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

打開方式

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

記錄

初始化

直接在標簽里面加上 class="video-js" 和 data-setup='{}' 屬性。

通過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）

打開方式

下載此 demo

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

在此文件夾的 index.html 中填寫你的 Access Key，瀏覽器打開即可

修改

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

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

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

原文件位于 baidu 文件夾中

總結

以上是生活随笔為你收集整理的关于前端直播（videoJS与百度云web播放器：Cyberplayer3.0试用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。