Vue使用video.js完美解决m3u8视频播放教程

本文主要介绍了如何在Vue项目中利用video.js和videojs-contrib-hls插件解决m3u8视频格式的播放问题。作者在经历了一下午的研究后，分享了两种有效的方法。 第一种方法涉及以下步骤： 1. 安装必要的依赖。在Vue项目中，需要安装video.js和videojs-contrib-hls。通常，一些资料建议使用较低版本的video.js，但作者经过测试确认，即使是7.0以上的新版本也能够正常工作，无需特意降级。 - 使用命令行工具执行：`npm install video.js --save` 和 `npm install videojs-contrib-hls --save` 2. 在Vue组件的模板中添加`<video>`元素。设置基本属性如id、class、controls、preload以及自适应宽高比。同时，可以设置`poster`属性来显示封面图片。 ```html <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" style='width:100%;height:auto' :poster="poster"></video> ``` 3. 计算属性`poster`可以根据实际需求处理封面图片。如果后台提供了封面图，则显示，否则显示默认图片。 ```javascript computed: { poster: function() { return this.posterSrc ? this.posterSrc : require("./../assets/images/coveImg.png"); } }, ``` 4. 在`methods`中定义`getVideo`方法来获取视频数据。这通常涉及到向服务器发送请求，以获取m3u8视频流。 5. 为了确保video.js的正常工作，可以在HTML文件中引入video.js的库。如果在Vue项目内引入出现问题，可以直接在HTML模板的头部引入： ```html <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script> ``` 6. 初始化video.js，设置相关配置，例如`bigPlayButton`、`textTrackDisplay`等，并配置hls选项，例如`withCredentials`为true，以支持跨域请求。 ```javascript getVideo() { this.myVideo = videojs("myVideo", { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, hls: { withCredentials: true } }); } ``` 通过以上步骤，Vue项目便能成功使用video.js播放m3u8格式的视频流，为处理此类问题提供了实用的解决方案。