目前有一個關於接入海康監控進行視頻融合的項目需求,按理說在前端技術發展如此迅速的今天,使用web播放一個視頻應該是不算什麼難事,只是萬事都有意外,因很多視頻廠家的監控數據都不是普通的mp4啥的,所以使用普通的object 或者video 是播放不了的,必須需要一些額外的插件進行支持,今天我們就來加載一個rtsp格式的視頻
一、安裝合適的瀏覽器
首選安裝一個合適的瀏覽器,我選擇的是72.0.3626.119
版本的(因插件不支持高版本chrome)
也可以安裝60.0.3080
版本的(只是我試過後來的cesium不支持過低版本瀏覽器)所以最後決定使用了72.0.3626.119
版本的
72.0.3626.119
版本瀏覽器資源雲盤下載提取碼: 8bha
60.0.3080
版本瀏覽器資源雲盤下載提取碼: oy20
這裏安裝低版本瀏覽器需要注意的是要設置一下不允許自動更新,否則安裝成功後瀏覽器自動會更新爲最新版本
二、安裝VXG Media Player
下載VXG Media Player
雲盤下載 提取碼:dc4h
然後將其解壓至任意目錄
選擇右上角按鈕> 擴展程序
點擊加載已解壓的擴展程序(就是一步解壓的文件目錄)
三、下載vxgPlayer插件
現在我們需要下載一個vxgPlayer.js插件,直接去大佬的github https://github.com/VideoExpertsGroup/VXG.Chrome-RTSP-Player下載後根據其readme執行一下打包操作即可生成一個dist目錄
其中vxgplayer-1.8.2.min.js
和``vxgplayer-1.8.2.min.css`就是我們所需的插件
如果怕麻煩可以直接雲盤下載 提取碼:uiga
四、創建項目測試
創建一個測試項目,引入上面獲取的js與css
<script type="text/javascript" src="../video_play_plugins/vxgplayer-1.8.40.min.js"></script>
<link rel="stylesheet" href="../video_play_plugins/vxgplayer-1.8.40.min.css">
同時將pnacl
目錄拷入
pnacl雲盤下載 提取碼:hvk6
在頁面中增加
<div class="vxgplayer" id="vxg_media_player1"
url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" autostart controls
avsync nmf-src="/video_play_plugins/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf"
width="300" height="300">
</div>
【注意】其中nmf-src
就是pnacl
下的文件,這個一定要對,不如會有如下錯誤
最後methods中增加
window.vxgplayer('vxg_media_player1').stop();
window.vxgplayer('vxg_media_player1').src("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
window.vxgplayer('vxg_media_player1').play();
最後效果
好啦完整代碼是這樣子的
<template>
<div class="test-page">
<span> 測試video 視頻資源獲取與播放</span>
<div @click="playVideo" class="btn-vis">點擊播放視頻</div>
<div class="video-warp" v-show="videoWarpShow">
<div @click="closeV" class="close">x</div>
<div class="vxgplayer" id="vxg_media_player1"
url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" autostart controls
avsync nmf-src="video_play_plugins/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf"
width="300" height="300">
</div>
</div>
</div>
</template>
<script>
export default {
name: "testVlcPlay",
data(){
return{
videoWarpShow:false
}
},
methods:{
playVideo(){
this.videoWarpShow = true;
// 設置url 播放
window.vxgplayer('vxg_media_player1').stop();
window.vxgplayer('vxg_media_player1').src("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
window.vxgplayer('vxg_media_player1').play();
},
},
destroy(){
window.vxgplayer.dispose();
}
}
</script>
ok 到這裏問題算是解決了,當初也是用過什麼Streamedian
,html5_rtsp_player這個測試當時需要安裝https://streamedian.com/最後沒有成功
也花費了大量時間去尋求其他解決方案,都沒有找到好的方法,所以在此記錄希望爲有同樣需求的小夥伴提供一點思路,如大家有更好解決方案請分享謝謝。