Vue中videojs的配置

videojs(el, options, cb): 接受三個參數: video標簽id, 要實例化的videojs配置, 回調函數;

 

常用的videojs配置選項:

• preload: 是否預加載
• muted : 實現靜音播放, 有一些瀏覽器需要靜音才能實現加載之后自動播放
• controls: 將顯示視頻控件, 如果不需要則去掉controls即可
• autoplay: 視頻在加載完成之后自動播放
• poster: 視頻封面圖片
• loop: true/false, 是否循環播放
• notSupportMessage: 瀏覽器無法播放時的提示信息
• techOrder: 播放控件,默認是html5,這里需要播放rtmp所以首選項要是flash
• fluid: 流式布局,自適應父元素大小
  更多的配置可以看videojs-options

 

常用方法和事件

1. autoplay()獲取或者設置自動播放屬性
2. currentTime()設置或者獲取當前播放進度
3. duration()獲取視屏的總長度，一般要等到視屏對象完全加載后才能獲取到，一般我們會使用定時輪詢的方式來獲取總時長
4. ended()獲取當前視屏對象是否已經處於結束狀態
5. enterFullWindow() 當全屏不支持我們可以視頻容器延伸到瀏覽器將讓我們一樣寬。經過試驗改api完全無法使視屏進入全屏。分析源碼后發現真正進入全屏的api應該是requestFullscreen()，但可惜該api只能又手勢觸發函數執行，連模擬點擊都沒法觸發他。
6. exitFullscreen() 退出全屏，有效的
7. exitFullWindow() 退出全屏，試了沒什么用
8. height() 設置/獲取播放器的高度
9. width() 設置/獲取播放器的寬度
10. isFullscreen() 檢查是否處於全屏模式
11. load() 開始加載視屏
12. loop() 在視頻中獲取或設置循環屬性元素
13. muted() 獲取當前的靜音狀態
14. pause() 暫停視頻
15. paused() 檢查視屏是否暫停
16. play() 播放視屏
17. played() 檢查視屏播放狀態
18. preload() 獲取或設置預加載屬性
19. ready() 視屏對象加載完成后調用ready中的回調函數
20. poster() 獲取或設置海報圖像源url
21. reset() 重載視屏
22. src() 更換視頻源
23. dispose() 銷毀視頻實例

當 video 標簽添加上 controls 屬性時，頁面上會顯示出所有的控制組件。若有些組件不需要只需要在css中設置相關屬性把它隱藏掉即可。

<video controls></video>

//全屏按鈕
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
//播放按鈕
video::-webkit-media-controls-play-button {
    display: none;
}
//進度條
video::-webkit-media-controls-timeline {
    display: none;
}
//觀看的當前時間
video::-webkit-media-controls-current-time-display{
    display: none;           
}
//剩余時間
video::-webkit-media-controls-time-remaining-display {
    display: none;           
}
//音量按鈕
video::-webkit-media-controls-mute-button {
    display: none;           
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;           
}
//音量的控制條
video::-webkit-media-controls-volume-slider {
    display: none;           
}
//所有控件
video::-webkit-media-controls-enclosure{
    display: none;
}