vue通过video.js解决m3u8视频播放格式的方法
前言
今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题
第一种方法
1.在vue中安装下面这些插件
cnpm install video.js --save ccnp install videojs-contrib-hls --save
网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过
2.页面中使用
<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文件引入
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
这样就可以了
2.3video.js配置项
getVideo() {
this.myVideo = videojs("myVideo", {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
hls: {
withCredentials: true
}
});
}
最重要的一点，标红的，一定一定要使用，下载了安装包，一定要在这个使用，才能失效。不然播放不了m3u8视频格式
mounted() {
this.$nextTick(() => {
this.getVideo();
});
this.getViewList();
},
定义的两个方法，放在mounted
第二种方法
上面是实现播放m3u8,接下来说第二种实现方法
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
地址请看 https://www.npmjs.com/package/hls.js/v/canary
引入上面那个文件
只需要写这么多，然后再mounted生命周期调用，但是这个没有video.js样式好看，都可以解决播放不了m3u8视频的格式问题。
以上都是来解决m3u8视频播放不了的问题，
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要为大家介绍了如何实现Vue前端分页和后端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本篇文章主要介绍了详解vue表单验证组件 v-verify-plugin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
下面小编就为大家分享一篇vue 页面加载进度条组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
我们有时候会碰到这种情况，需要连续发送两个请求，第二个请求需要用第一个请求的某个返回值作为参数来作为第二个请求的请求参数，这篇文章主要介绍了vue请求如何按顺序执行,需要的朋友可以参考下2023-12-12
Vue 中使用vue2-highcharts实现top功能的示例
下面小编就为大家分享一篇Vue 中使用vue2-highcharts实现top功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文主要介绍了vue-cli5搭建vue项目的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家详细介绍了Vue-pdf实现在线预览PDF文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue中window.onresize的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
关于nuxt store中保存localstorage的问题
这篇文章主要介绍了关于nuxt store中保存localstorage的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论