vue通过video.js解决m3u8视频播放格式的方法


Posted in Javascript onJuly 30, 2019

前言

今天被这个关于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>

这样就可以了

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

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

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

引入上面那个文件

vue通过video.js解决m3u8视频播放格式的方法

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
JavaScript 继承详解(二)
Jul 13 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
swiper实现导航滚动效果
Dec 13 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 #Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 #Javascript
vue前后分离调起微信支付
Jul 29 #Javascript
详解vue-property-decorator使用手册
Jul 29 #Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 #Javascript
微信小程序 WXML节点信息查询详解
Jul 29 #Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 #Javascript
You might like
PHP实时显示输出
2008/10/02 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
解析php中curl_multi的应用
2013/07/17 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python中index()和seek()的用法(详解)
2017/04/27 Python
彻底理解Python list切片原理
2017/10/27 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers