Vue+Video.js rtmp/flv直播流媒體配置

 

rtmp/flv直播配置

必須引入flash 

//npm install videojs-flash

//import videojs-flash

<video

id="my-player"

class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"

preload="auto"

autoplay

style="width: 1200px;height: 640px;"

controls

data-setup="{}"

></video>

import videojs from "video.js";

import "video.js/dist/video-js.css";

import "videojs-flash";

methods: {

playVideo() { var videoPlayer = videojs( "my-player", { sources: [ { src: "rtmp://www.91cb.site:8510/live/product1621", type: "rtmp/flv" } ], muted: true, controls: true, autoplay: true, loop: true, techOrder: ["html5", "flash"], width: "1200", height: "640" }, function() { this.play(); } ); },
}

 

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() 銷毀視頻實例

 

更多事件以及apivideojs-api

事件監聽采用on('listener', cb),off('list')移除事件監聽

 this.on('firstplay', e => {}); this.on('progress', e => {}); this.on('timeupdate', e => {}); 

• 視頻開始加載時會觸發firstplay
• 實例化之后會觸發progress,有時候實例化之后無法與后台建立連接,可以在回調設置一個定時器,監聽3s后的currentTime()判斷是否建立連接
• 視頻播放時會不斷觸發timeupdate事件,結合currentTime()可以檢測是否播放中斷

 

遇到的問題

1. videojs播放窗口小於400300時無法自動播放,因為video-js.swf文件跨域.播放rtmp視頻時videojs會在cdn上加載一個video-js.swf文件,該文件必須同源才能支持播放窗口小於400300時自動播放

2. 使用dispose()銷毀實例時會將頁面上的dom節點一並移除,如果需要二次復用,則可以在初始實例化時先將節點保存起來

3. videojs提示 (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.可能是沒有開始瀏覽器flash支持,chrome默認是詢問,需要改成允許