Vue使用video.js播放m3u8视频流_videourl.m3u8

Vue使用video.js播放m3u8视频流

有这样一需求，播放视频流功能，也就是监控视频，让后端吧视频流格式转换m3u8；刚开始赚了很多种格式的 都不太支持，比如flv，rtsp，rtmp等格式，这些格式都不太行（也许是我太菜了）。

一、安装video.js依赖

npm install --save-dev video.js
1

1、HTML部分代码，先给video一个容器，给一个id

<video id="videoPlayer" class="video-js" muted></video>
1

2、引入video.js

import videojs from "video.js";
1

3、方法中调用

export default {
	data() {
		return {
			videoUrl: "http://192.168.10.37/hls/live.m3u8",//m3u8格式视频流地址
		}
	},
	mounted() {
		this.$nextTick(() => {
	      this.getVideo(this.videoUrl);
	    });
	},
	methods:{
		getVideo(url) {
	      let options = {
	        autoplay: true, // 设置自动播放
	        controls: true, // 显示播放的控件
	        sources: [
	          //如果需要切换视频源，src需要动态设置
	          {
	            src: url,
	            type: "application/x-mpegURL", // 告诉videojs,这是一个m3u8流
	          },
	        ],
	      };
	      // videojs的第一个参数表示的是，文档中video的id
	      videojs("videoPlayer", options, function onPlayerReady() {});
	    },
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29