vue视频监控 videojs 组件封装

封装组件 

<template>
	<div class="" style="width: 100%;height: 100%">
		<video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered videoBox"></video>
	</div>
</template>

<script>
	import videojs from "video.js";
	import "video.js/dist/video-js.css";
	import "videojs-flvjs-es6";
	import "videojs-flash";
	// http://61.171.95.47:8081/rtp/34020000002000000002_34020000001320000001.live.flv
	export default {
		props: {
			videoUrl: {
				type: String,
				default: ""

			}
		},
		data() {
			return {
				videoPlayer: null
			};
		},
		mounted() {
			this.handelVideoUrl();
		},
		methods: {
			handelVideoUrl() {

				let options = {
					muted: true,
					controls: true, //进度条
					autoplay: true, //自动播放
					loop: true, //是否循环
					languages: {
						"zh-CN": require("video.js/dist/lang/zh-CN.json")
					},
					language: "zh-CN",
					preload: "auto",
					notSupportedMessage: '此视频暂无法播放，请稍后再试',
					textTrackDisplay: false,
				};
				const url = this.videoUrl.replace(/\s+/g, "");
				if (url.indexOf("rtmp") > -1) {
					//rtmp格式视频
					options = {
						...options,
						techOrder: ["html5", "flash"], // 兼容顺序
						sources: [{
							src: this.videoUrl,
							type: "rtmp/flv"
						}]
					};
				} else if (url.lastIndexOf(".") > -1) {
					if (url.substring(url.lastIndexOf(".") + 1) === "flv") {
						//flv格式视频
						options = {
							...options,
							techOrder: ["html5", "flvjs"], // 兼容顺序
							flvjs: {
								mediaDataSource: {
									isLive: false,
									cors: true,
									withCredentials: false
								}
							},
							sources: [{
								src: this.videoUrl,
								type: "video/x-flv"
							}]
						};
					} else if (url.substring(url.lastIndexOf(".") + 1) === "m3u8") {
						//flv格式视频
						options = {
							...options,
							// techOrder: ["html5", "flvjs"], // 兼容顺序
							// flvjs: {
							// 	mediaDataSource: {
							// 		isLive: false,
							// 		cors: true,
							// 		withCredentials: false
							// 	}
							// },
							sources: [{
								src: this.videoUrl,
								type: "application/x-mpegURL"
							}]
						};
					} else {
						//其他格式视频
						options = {
							...options,
							sources: [{
								src: this.videoUrl,
								type: "video/mp4"
							}]
						};
					}
				}

				this.videoPlayer = videojs(this.$refs.videoPlayer, {
					...options
				});
			}
		},
		destroyed() {
			if (this.videoPlayer) {
				this.videoPlayer.dispose();
			}
		}
	};
</script>

<style>
	.videoBox {
		width: 100%;
		height: 100%
	}
</style>

使用组件

1、引入

<script>
import Video from '@/components/Video'
export default {
    components: {
		Video
	},
}
</script>

2、使用

<template>

<div style="width: 32%;height: 232px;">
<Video :videoUrl="item.CameraUrl" />
</div>
</template>