vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看。会使用两种方法来解决这个问题
- 第一种方法
1.在vue中安装下面这些插件
1
2
|
cnpm install video.js --save
ccnp install videojs-contrib-hls --save
|
网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,最后结果测试,根本不需要什么低版本的高版本的,7版本以上的没有任何问题。小编已经亲自试验过
2.页面中使用
1
2
3
4
5
6
7
8
9
|
<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文件引入
1
|
<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,接下来说第二种实现方法
1
|
<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视频播放不了的问题,
转载于:https://www.cnblogs.com/reeber/p/11267039.html
vue使用video.js解决m3u8视频播放格式相关推荐
- 无效的m3u8怎么办_vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...
- dplayer js控制 自动全屏_vue 中使用video.js 实现m3u8视频播放格式
官方文档:https://docs.videojs.com/tutorial-vue.html H5 的 video 标签不支持m3u8视频播放,所以借助于 video.js 1.video 定义与用 ...
- m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
- Vue Video.js播放m3u8视频流格式(video+videojs-contrib-hl)
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
- video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前 由 Apple.inc 率先提出的 HLS 协议在 ...
- videojs 卡顿_流媒体技术学习笔记之(四)解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
- vue中 使用video.js 播放m3u8直播流
需求描述 支持播放m3u8直播流 + 录屏 视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果 实现代码 安装依赖 npm install video.js --save // 视频播放器 ...
- Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
- vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
最新文章
- 201671010128 2017-11-12《Java程序设计》之图形程序设计
- 跳石头 NOIP2015 提高组 Day2 T1
- ubuntu 安装google浏览器
- 小波的秘密1_小波变换概况与综述
- 【趣话编程】一个Java对象的回忆录:垃圾回收
- 专业RAW图像处理软件Capture One Pro 22
- VRTK实现瞬移, 多场景复制
- python算术平方根_Python 平方根
- Thinkpad T470 内置电池问题
- 【IDE】IAR for ARM官网下载链接(超级全,什么版本都有——找不到来打我)
- 目标检测中常见指标 AP MAP coco Pascal voc 评价指标说明
- matlab求松弛迭代发,[求助]Matlab超松弛迭代法 高手帮忙看看
- 数据结构考研:大O表示法最浅显易懂且详细深入的解释及与小o表示法的区别(十分钟必懂)
- 一对一或一对多音视频通话会议系统可以通过哪些方式实现?
- Metricbeat入门案例
- 模式识别:C-means(K-means)聚类算法与分级聚类(层次聚类)算法
- linux logger 监控,shell-logger的使用
- Uniswap计算过程推演
- 个人理解小波变换及转载小波变换原理
- 局域网即时通信软件都有哪些?要如何选择?
热门文章
- oracle比较强大的函数,SQL和ORACLE函数比较
- Java LinkedHashMap 逆序遍历
- JasperReport报表导出PDF中文不显示的问题
- Disruptor内存消息队列简单使用
- MyBatis 使用 foreach 批量插入
- 软件设计模式之单例模式
- 【概率论与数理统计】小结8 - 三大抽样分布
- jq中html(),text(),val()以及js中innerHTML,innerText和value
- 下载所有需要的rpm文件路径
- 不停止MySQL服务增加从库的两种方式