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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
详解 TypeScript 枚举类型
Nov 02 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发电子邮件
2006/10/09 PHP
php include,include_once,require,require_once
2008/09/05 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python 求定积分和不定积分示例
2019/11/20 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python模拟实现斗地主发牌
2020/01/07 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
运动会通讯稿50字
2014/01/30 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
人事部经理岗位职责
2014/03/07 职场文书
歼十出击观后感
2015/06/11 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS