vue使用video.js解决m3u8视频播放格式-阿里云开发者社区

开发者社区> 小周sir> 正文

vue使用video.js解决m3u8视频播放格式

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


这样就可以了

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
引入上面那个文件

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

以上都是来解决m3u8视频播放不了的问题,

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何判断自己使用的是appid请求还是pid(partner)请求
appid请求(如下图):   网关是openapi([url]https://openapi.alipaydev.com/gateway.do[/url]) ,appid (年份开头)  pid请求:(如下图):   网关是:mapi ([url]https://mapi.
421 0
对小程序地图小程序API:my.createMapContext(mapId)的简单使用
my.createMapContext(mapId):创建并返回 map 上下文 mapContext 对象。 mapContext 通过 mapId 跟一个  组件绑定,通过它可以操作对应的  组件。
1505 0
js判断文件格式及大小
//上传文件大小以及格式验证 function getPhotoSize(obj){ photoExt=obj.
648 0
技能学习:学习使用node.js + vue.js,开发前端全栈网站-1.工具和本地环境
Node.js 运行环境是引领前端开发人员的“一道光”,让前端开发人员**仅**利用已掌握的 js 语言就可以实现对网站服务器环境的搭建与运行。打破了以往前后端分工合作、交流对接的惯性习惯。 相对于传统PHP、JAVA开发,Node.js 附带的npm更方便、快捷地让前端开发人员更快、更方便地使用和获取其他前端大神封装好的 js 类库和精美UI样式库,舍去不同语言和不同编码的切换过程。
128 0
vue使用video.js解决m3u8视频播放格式
vue使用video.js解决m3u8视频播放格式
24 0
视频文件格式分析(1):avi格式
近日某网盘对用户保存其中的部分私人视频进行篡改,使得这部分视频无论是在线或者下载后均无法播放。我们借着研究对应方法,修复被非法篡改的视频数据,恢复正常使用的机会,研究一下avi的数据格式。
1056 0
使用 VuePress 搭建博客网站
使用 VuePress 搭建博客网站
69 0
Web Storage API的介绍和使用
Web Storage为浏览器提供了方便的key value存储,是一种比cookie更加方便简洁的存储方式。也是诸多客户端存储方式中非常常见的一种。
1675 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载