html 百度云 视频无法播放器,关于前端直播（videoJS与百度云web播放器：Cyberplayer3.0试用）...

videoJS

实现PC/移动端适应直播，暂停播放出现广告(哎，万恶的广告)git

打开方式

下载此demo，浏览器打开 index.htmlgithub

记录

初始化

直接在标签里面加上 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-centeredweb

在暂停的时候出现播放按钮，可经过添加样式浏览器

.vjs-paused .vjs-big-play-button {

display: block;

}

百度视频播放器demo

实现PC/移动端适应直播，暂停播放出现广告(咦，同上demo)

svg

打开方式

下载此 demopost

登录百度云管理中心，获取 Access Key (免费的)，登录地址:https://cloud.baidu.com/?from=consolethis

在此文件夹的 index.html 中填写你的 Access Key，浏览器打开便可code

修改

视频播放器的图片广告宽高为固定的 400 * 300，可能与实际使用不符。此文件夹中的 cyberplayer.js 文件，相关地方已经被我统一改成变量：

window.ADWIDTH = 400; // 广告宽度

window.ADHEIGHT = 300; // 广告高度

可经过修改 window.ADWIDTH 和 window.ADHEIGHT 自定义

原文件位于 baidu 文件夹中