整合vxgPlayer使chrome支持vxg_media_player播放rtsp视频，目前全网唯一chrome支持rtsp，rtmp流的播放器

    <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">

• 1
• 2
• 3
• 4

同时将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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

【注意】其中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();

• 1
• 2
• 3
• 4
• 5

最后效果
好啦完整代码是这样子的

<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>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

</template>

<script>
export default {
name: “testVlcPlay”,
data(){
return{
videoWarpShow:false
}
},
methods:{
playVideo(){
this.videoWarpShow = true;
// 设置url 播放 —添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
this.$nextTick(() => {
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(‘vxg_media_player1’).dispose();
}
}
</script>

ok 到这里问题算是解决了，当初也是用过什么Streamedian，html5_rtsp_player这个测试当时需要安装https://streamedian.com/最后没有成功

也花费了大量时间去寻求其他解决方案，都没有找到好的方法，所以在此记录希望为有同样需求的小伙伴提供一点思路，如大家有更好解决方案请分享谢谢。