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

前言

今天关于m3u8的视频，整个下午都无法播放。本项目所有视频流均为m3u8格式，后台返回给我们的视频流均为m3u8格式。已经解决很久了，看了很多博客。只有这个博客给了我一些解决这个问题的灵感。请检查一下。有两种方法可以解决这个问题

第一种方法

1.在vue中安装以下插件

Cnpm安装video.js-save ccnp安装video js-contrib-HLS-save online，据说video.js太高不能用，7版或更高版本不能用，但是用了5版，最终结果测试显示不需要更低版本或更高版本，7版或更高版本也没有问题。边肖亲自测试过

2.在页面中使用

video id=' my video ' class=' video-js vjs-default-skin vjs-big-play-centered ' controls spread=' auto ' style=' width : 100%；高度： auto' :海报='海报'/video2.1海报设置封面图片。我在计算属性时做出了判断。如果封面图片是在后台上传的，会显示出来。如果没有上传，将显示默认图片。这个根据我自己的需要解决。

computed : { poster : function(){ return this . posterrc？this.posterSrc :要求('。/./assets/images/Covenimg . png ')；} }，2.2在methods中定义一个方法，getViewList用于请求数据和获取视频流

2.3下载后引入页面。如果引入video.js有问题，它会被引入到html文件中

脚本src=' http://vjs.zencdn.net/7.3.0/video.min.js'/script,就是这样

2.3video.js配置项

getVideo(){ this . myVideo=videojs(' my video '，{ bigPlayButton: true，textTrackDisplay: false，posterImage: false，errorDisplay: false，HLS : { withdradentials : true } })；}最重要的一点，用红色标出，必须使用。下载安装包后，必须在这里使用，否则将无效。否则，无法播放m3u8视频格式

mounted() {this。$ NextTick(()={ this . Getvideo()；});this . GetViewList()；}，定义了两种方法，放置在mounted中

第二种方法

以上是播放m3u8的实现，接下来描述第二种实现方法。

脚本src=' http :https://cdn . jsdeliver . net/NPM/[电子邮件保护]'/有关脚本地址，请参见https://www.npmjs.com/package/hls.js/v/canary

导入上述文件

你只需要写这么多，然后在挂载的生命周期内调用就可以了，但这还不如video.js风格，可以解决播放m3u8视频的格式问题。

以上是为了解决m3u8的视频无法播放的问题。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。