⑴ videojs如何在控制欄上增加一個按鈕
這是實現之後的效果
源碼:
//自定義控制條
var player = videojs(videoId,
{
"controls": true,
"autoplay": false,
"preload": "auto",
"loop": false,
controlBar:
{
captionsButton: false,
chaptersButton: false,
playbackRateMenuButton: true,
LiveDisplay: true,
subtitlesButton: false,
remainingTimeDisplay: true,
progressControl: true,
volumeMenuButton:
{
inline: false,
vertical: true
},
//豎著的音量條
fullscreenToggle: true
}
}, function () {
var newbtn = document.createElement('btn');
newbtn.innerHTML = '<button class="vjs-control" id="downloadButton"><i class="fa fa-expand" title="全屏"></i></button>' + '<button class="vjs-control" id="full_screen_button"><i class="fa fa-chrome" title="截圖"></i></button>' ;
var controlBar = document.getElementsByClassName('vjs-control-bar')[0];
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
controlBar.insertBefore(newbtn,insertBeforeNode);
player.src({ type : "rtmp/flv", src : r.roomLiveUri});
player.play();
});
裡面用到了一些前端框架的樣式,所以按鈕圖標你需要自己去找,參考的是這位大佬的博客:網頁鏈接