實(shí)現(xiàn)點(diǎn)擊左側(cè)攝像頭列表，切換到對(duì)應(yīng)攝像頭畫(huà)面
效果：
image.png
首先是需要的video.js版本，之前試了6.X版本喇辽，一直報(bào)錯(cuò)試了各種辦法都無(wú)法解決计呈，最后切換到低版本5.X可以了砰诵。在項(xiàng)目根目錄下使用cmd或者在IDE使用控制臺(tái)，輸入以下命令安裝依賴包捌显，前提是已安裝NPM包管理工具茁彭，該工具會(huì)隨node.js一同安裝。
npm install video.js@5.6.0 -S
html部分
<video id="my-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="auto"
autoplay
style="width: 100%;height: 100%;"
controls
data-setup='{"html5" : { "nativeTextTracks" : false }}'>
<source src="videoSrc" type="rtmp/flv">
</video>
poster-視頻開(kāi)始前的封面圖片
preload-預(yù)加載
autoplay-自動(dòng)播放
controls-控制按鈕
data-setup-播放器初始化相關(guān)扶歪，我用了js中實(shí)例化播放器所以刪掉了這個(gè)屬性理肺，播放器使用無(wú)影響，具體參考：https://www.awaimai.com/2053.html
js部分
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
videojs.options.flash.swf = SWF_URL // 設(shè)置flash路徑，Video.js會(huì)在不支持html5的瀏覽中使用flash播放視頻文件
export default {
name: 'videojs',
data() {
return {
videoPlayer: undefined,
videoSrc: ''
}
},
methods: {
// 選擇攝像頭時(shí)的觸發(fā)事件哲嘲，可以根據(jù)攝像頭信息獲取對(duì)應(yīng)的直播流地址后對(duì)videoSrc進(jìn)行賦值
selectVideo() {
this.videoSrc = 'rtmp://10.74.20.123/live/record1';
const videoPlayer = videojs('my-player');// 關(guān)聯(lián)video標(biāo)簽的id
videoPlayer.src({
src: this.videoSrc,
type: 'rtmp/flv'
});
videoPlayer.play();
}
}
}
