關於前端直播(videoJS與百度雲web播放器:Cyberplayer3.0試用)
阿新 • • 發佈:2019-01-08
文章目錄
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 資料夾中