关于前端直播（videoJS与百度云web播放器：Cyberplayer3.0试用）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39759115/article/details/84343254

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 文件夹中