时间:2021-05-26
前言
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看。会使用两种方法来解决这个问题
第一种方法
1.在vue中安装下面这些插件
cnpm install video.js --saveccnp install videojs-contrib-hls --save网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,最后结果测试,根本不需要什么低版本的高版本的,7版本以上的没有任何问题。小编已经亲自试验过
2.页面中使用
<videoid="myVideo"class="video-js vjs-default-skin vjs-big-play-centered"controlspreload="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>这样就可以了
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:///package/hls.js/v/canary
引入上面那个文件
只需要写这么多,然后再mounted生命周期调用,但是这个没有video.js样式好看,都可以解决播放不了m3u8视频的格式问题。
以上都是来解决m3u8视频播放不了的问题,
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
为什么要使用video.js?1.PC端浏览器并不支持video直接播放m3u8格式的视频2.手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的
vue中的视频播放vue.js中引入video视频播放器main.js中引入importVideofrom'video.js'import'video.js/d
一、关于m3u8:m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频
TBS视频播放TBS视频播放器可以支持市面上几乎所有的视频格式,包括mp4,flv,avi,3gp,webm,ts,ogv,m3u8,asf,wmv,rm,rm
电影之类的长视频好像都用m3u8格式了,这就导致了多线程下载视频的意义不是很大,都是短视频,线不线程就没什么意义了嘛。我们知道,m3u8的链接会下载一个文档,相