vue中使用videojs播放rtmp流视频

首先npm安装videojs

npm install video.js --save

然后页面引入video.js相关内容

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

页面html代码

<video 
    id="my-player" 
    class="video-js vjs-default-skin" 
    preload="auto" 
    data-setup="{&quot;html5&quot; : { &quot;nativeTextTracks&quot; : false }}"
    >
</video>

进行播放代码

this.videoPlayer = videojs("my-player");//关联video的id
this.videoPlayer.src({
		type: "rtmp/flv",
		src:videoUrl//要播放的视频流url
});
this.videoPlayer.play();//进行播放

在离开页面的时候要对video进行销毁，要不然控制台会报错

if(this.videoPlayer !=null){ //判断是否已经初始化视频
    this.videoPlayer.dispose(); //销毁video
}
	  

也可以对视频进行重置

this.videoPlayer.reset(); //重置video

因为播放rtmp实时视频流时需要对Flash进行允许，所以播放前要检查是否已经允许