vue使⽤video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了⼀下午，这个项⽬所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，。会使⽤两种⽅法来解决这个问题
第⼀种⽅法
1.在vue中安装下⾯这些插件
1 2cnpm install video.js --save
ccnp install videojs-contrib-hls --save
⽹上有说video.js版本太⾼不能使⽤，不能使⽤7以上的版本，⽤5版本的，最后结果测试，根本不需要什么低版本的⾼版本的，7版本以上的没有任何问题。⼩编已经亲⾃试验过
2.页⾯中使⽤
1 2 3 4 5 6 7 8 9<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered" controls
preload="auto"
style='width: 100%;height: auto'
:poster="poster"空调出风口滴水
>
</video>
2.1 poster设置封⾯图，我在计算属性判断了⼀下，，如果后台上传封⾯图，就显⽰，如果没有上传就显⽰默认的图⽚，这个是根据⾃⼰的需求来解决
computed: {
poster: function() {台式机组装步骤
return this.posterSrc
眼睛近视了怎样才能恢复this.posterSrc
: require("./../assets/images/coveImg.png");
}
},
2.2在methods中定义⼀个⽅法，getViewList⽤于请求数据，拿到视频流
2.3下载之后在页⾯中引⼊，如果引⼊video.js有问题，就在html⽂件引⼊
1<script src="//dn/7.3.0/video.min.js"></script>
这样就可以了
2.3video.js配置项
getVideo() {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
hls: {
withCredentials: true
}
});
}
最重要的⼀点，标红的，⼀定⼀定要使⽤，下载了安装包，⼀定要在这个使⽤，才能失效。不然播放不了m3u8视频格式
mounted() {
赞扬老师的句子this.$nextTick(() => {
});
中国最大的黑帮ViewList();
},
定义的两个⽅法，放在mounted
第⼆种⽅法
上⾯是实现播放m3u8，接下来说第⼆种实现⽅法蜡像制作
1<script src="cdn.jsdelivr/npm/hls.js@latest"></script>
地址请看 www.npmjs/package/hls.js/v/canary
引⼊上⾯那个⽂件
只需要写这么多，然后再mounted⽣命周期调⽤，但是这个没有video.js样式好看，都可以解决播放不了m3u8视频的格式问题。
以上都是来解决m3u8视频播放不了的问题，
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论