重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue如何通过video.js解决m3u8视频播放格式问题-创新互联

这篇文章主要介绍了vue如何通过video.js解决m3u8视频播放格式问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联成都网站建设按需求定制开发,是成都网站开发公司,为效果图设计提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站推广热线:028-86922220

第一种方法

1.在vue中安装下面这些插件

cnpm install video.js --save
ccnp install videojs-contrib-hls --save

网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,最后结果测试,根本不需要什么低版本的高版本的,7版本以上的没有任何问题。小编已经亲自试验过

2.页面中使用

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文件引入

这样就可以了

vue如何通过video.js解决m3u8视频播放格式问题

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,接下来说第二种实现方法

地址请看 https://www.npmjs.com/package/hls.js/v/canary

引入上面那个文件

vue如何通过video.js解决m3u8视频播放格式问题

只需要写这么多,然后再mounted生命周期调用,但是这个没有video.js样式好看,都可以解决播放不了m3u8视频的格式问题。

感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何通过video.js解决m3u8视频播放格式问题”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章标题:vue如何通过video.js解决m3u8视频播放格式问题-创新互联
分享网址:http://cqcxhl.cn/article/dgpogh.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP