Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）

文章目录

1. Vue+Video.js播放效果图2. npm安装和引入3. vue 使用4. 动态设置video视频的src地址5. Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)6. 附上一些 m3u8 源地址，方便测试使用

1. Vue+Video.js播放效果图

采用 m3u8 视频流格式播放

2. npm安装和引入

2.1 首先，我们需要在vue工程中安装video.js相关依赖。

npm install --save video.js npm install --save videojs-contrib-hls

2.2 然后，我们需要引入videojs的css文件，例如在main.js中引入

import 'video.js/dist/video-js.css'

2.3 接着，我们在需要播放视频的页面引入js对象

import videojs from "video.js"; import "videojs-contrib-hls";

3. vue 使用

3.1 指定一个video容器，例如：

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="500px" > <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" /> </video>

3.2 最后，我们在mounted节点初始化播放器：

methods:{ getVideo() { videojs( "my-video", { bigPlayButton: false, textTrackDisplay: false, posterImage: true, errorDisplay: false, controlBar: true }, function() { this.play(); } ); } } mounted() { this.getVideo(); },

4. 动态设置video视频的src地址

4.1 准备一个点击动态切换的按钮

<button @click="checkVideo()">点击切换到CCTV3</button>

4.2 在methods方法中，通过动态设置src，在重新调用play()方法

checkVideo() { var myPlayer = videojs("my-video"); myPlayer.src([ { type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3频道 } ]); myPlayer.play(); }

5. Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)

关于报错 Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs) 的解决办法。

问题：在我们正常使用的时候都是完全可以使用的，但是当我们有的时候需要把视频放在弹窗el-dialog里面显示时，就会出现这个报错问题。

原因：页面未找到相应组件

解决：使用setTimeout延迟加载。

let _that = this; setTimeout(() => { _that.getVideo(); }, 300);

6. 附上一些 m3u8 源地址，方便测试使用

CCTV-1高清 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 CCTV-3高清 http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8 CCTV-5高清 http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8 CCTV-5+高清 http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8 CCTV-6高清 http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8 CCTV-8高清 http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8 CHC高清电影 http://ivi.bupt.edu.cn/hls/chchd.m3u8 北京卫视高清 http://ivi.bupt.edu.cn/hls/btv1hd.m3u8 北京文艺高清 http://ivi.bupt.edu.cn/hls/btv2hd.m3u8 北京体育高清 http://ivi.bupt.edu.cn/hls/btv6hd.m3u8 北京纪实高清 http://ivi.bupt.edu.cn/hls/btv11hd.m3u8 湖南卫视高清 http://ivi.bupt.edu.cn/hls/hunanhd.m3u8 浙江卫视高清 http://ivi.bupt.edu.cn/hls/zjhd.m3u8 江苏卫视高清 http://ivi.bupt.edu.cn/hls/jshd.m3u8 东方卫视高清 http://ivi.bupt.edu.cn/hls/dfhd.m3u8 安徽卫视高清 http://ivi.bupt.edu.cn/hls/ahhd.m3u8 黑龙江卫视高清 http://ivi.bupt.edu.cn/hls/hljhd.m3u8 辽宁卫视高清 http://ivi.bupt.edu.cn/hls/lnhd.m3u8 深圳卫视高清 http://ivi.bupt.edu.cn/hls/szhd.m3u8 广东卫视高清 http://ivi.bupt.edu.cn/hls/gdhd.m3u8 天津卫视高清 http://ivi.bupt.edu.cn/hls/tjhd.m3u8 湖北卫视高清 http://ivi.bupt.edu.cn/hls/hbhd.m3u8 山东卫视高清 http://ivi.bupt.edu.cn/hls/sdhd.m3u8