vue + flv 实现 视频播放
首先我们选的框是vue-cli,我们这期用到的哔哩哔哩的那个flv.js,而且这个很好用。
要实现,第一步:
引入 <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
第二步:
在 xxx.vue 中加入标签
<video id="videoElement" controls width="100" height="100">xxx</video>
第三步:
要用到我们的js,在mounted()里我们写入加载方法:
var player; (这个声明在mounted外面写)
player = document.getElementById('videoElement')
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'mp4',
url: 'xxx.mp4'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
}
补充:如果用到按钮控制,有methods方法,play(),pause(),收放自如。
ok,这个时候刷新你的vue页面,看看是不是出来了!!
感谢大家的支持!!