vue使用video.js解决m3u8视频播放格式
2019-07-29 18:25
5161 查看
今天被这个关于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>
这样就可以了
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
引入上面那个文件
只需要写这么多,然后再mounted生命周期调用,但是这个没有video.js样式好看,都可以解决播放不了m3u8视频的格式问题。
以上都是来解决m3u8视频播放不了的问题,
相关文章推荐
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
- 流媒体技术学习笔记之(四)解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
- Android使用VideoView出现无法播放此视频问题的解决方法
- H5页面播放视频—试看3分钟(使用video.js)
- Vue.js -- 解决表单元素使用v-modal双向绑定时间戳改日期格式
- vue + typescript + video.js实现 流媒体播放 视频监控功能
- 使用video.js播放视频
- 视频播放插件Video.js简单使用
- js-视频播放插件Video.js简单使用
- cordova开发:android端用video.js播放视频,解决退出全屏后应用被状态栏遮挡
- 使用vlc解决在web上点击播放ts格式视频
- 【vue】video结合cyberplayer.js实现flv视频播放
- 【PythonDjango后台实例 第七章】Django使用Video.js视频播放插件
- HTML5视频播放插件Video.js使用详解
- Android使用react-native-video 播放视频一直重复播放的解决方法
- vue项目中使用pdf.js,通过解析后台base64格式文件解决跨域问题
- 解决Qt使用定时器播放视频过快的问题
- Android中使用VideoView 播放视频
- Android使用VideoView播放网络视频
- 20151128-02 使用VideoView播放视频时无视频画面