视频播放器，基于videojs,NVR

最新推荐文章于 2025-07-14 09:30:11 发布

小巷陌影

最新推荐文章于 2025-07-14 09:30:11 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript vue layui 文章标签： videojs

本文链接：https://blog.youkuaiyun.com/xiaoyanli8077/article/details/93192312

javascript 同时被 3 个专栏收录

33 篇文章

订阅专栏

layui

11 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

该博客介绍了在Web端播放监控视频的方法，基于EasyNVR获取直播链接进行播放，并对播放器进行封装。还提及可从码云或GitHub下载源码，涉及HTML和JS技术，展示了播放效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web播放监控视频，基于EasyNVR获取直播链接进行播放。对播放器进行封装。源码下载码云或GitHub

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频分屏</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
		<link href="../../layui/css/layui.css" rel="stylesheet" />
		<link href="../../video/css/video-js.min.css" rel="stylesheet" />
		<link href="../../video/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../video/css/player.css" rel="stylesheet" />
		<style>
			.palyer_bg_color{
				background-color: #FFFFFF;
			}
			.palyer_bg_color1{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="video_screen" class="layui-row layui-col-space5" style="height: 100%; margin: auto;">
			<template v-for="(screen,index) in screens">
				<div v-bind:id="getId(index)" v-bind:class="getClass(index)" class="page" @mouseenter="enter(index)" @mouseleave="leave(index)"
				 v-on:dblclick="fullscreen(index)"  v-on:click="playByUrl(index)">
					<div class="header">
						<label>{{screen.video_addr}}</label>
					</div>
					<div class="content">
						<video v-bind:id="getVideoId(index)" class="video-js vjs-default-skin player" preload="auto" autoplay="true"
						 muted="true" poster="../../img/main/v.jpg" data-setup="{}">
							你的浏览器不支持Video标签！！！
						</video>
						<div class="control">
							<div class="fa fa-pause play_pause"></div>
							<div class="right">
								<div class="fa fa-volume-up fa-volume-off"></div>
								<div class="fa fa-arrows-alt expand" @click="fullscreen(index)"></div>
							</div>
						</div>
					</div>
					<div class="footer"></div>
				</div>
			</template>
		</div>
		<script type="text/javascript" src="../../js/lib/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="../../video/js/video.min.js"></script>
		<script type="text/javascript" src="../../video/js/flv.min.js"></script>
		<script type="text/javascript" src="../../video/js/videojs-flvjs.main.js"></script>
		<script type="text/javascript" src="../../video/setupVideo.js"></script>
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<script type="text/javascript" src="../../js/lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../js/common/common.js"></script>
		<script type="text/javascript" src="../../js/common/video/videoComm.js"></script>
		<script type="text/javascript" src="../../js/main/splitScreen.js"></script>
	</body>
</html>

/**
 * 分屏
 * @author chenbin
 */

/**
 * 调用方式
 * 方式1 callMode等于1 参数为播放地址数组
 * 格式:[{main_channel: 1, address: "进站厅3号通道东", name: "摄像头1", nvr_id: 1},{}]
 * 方式2 callMode等于2 参数为摄像头参数
 * 格式:[{url:"",type:"",video_addr:""},{url:"",type:"",video_addr:""}...]
 * 方式3 callMode等于3 参数为分屏数量最大为25
 * 
 */
var callMode = parent.callMode;
var sign = url.getUrlParms("sign") == "undefined" ? "" : url.getUrlParms("sign");

//播放器控制条
$(".control").hide();
window.winId ="";

var vm = new Vue({
	el: "#video_screen",
	data: {
		items: [],
		showBorder:-1
	},
	computed: {
		screens: function() {
			var d = this.items;
			var l = d.length;
			var s = 1;
			for (var i = 1; i <= l; i++) {
				var v = i * i;
				if (l <= v) {
					s = v;
					break;
				}
			}
			for (var j = 0; j < s - l; j++) {
				var obj = {
					video_addr: "视频地址",
					src: "",
					type: ""
				};
				d.push(obj);
			}
			return d;
		}
	},
	methods: {
		getClass: function(e) {
			var index = this.screens.length;
			var obj = "layui-col-xs12 layui-col-sm12 layui-col-md12 h_screen_one";
			if (index == 4) {
				obj = "layui-col-xs6 layui-col-sm6 layui-col-md6 h_screen_two";
			} else if (index == 9) {
				obj = "layui-col-xs4 layui-col-sm4 layui-col-md4 h_screen_three";
			} else if (index == 16) {
				obj = "layui-col-xs3 layui-col-sm3 layui-col-md3 h_screen_four";
			} else if (index == 25) {
				obj = "w_screen_five h_screen_five";
			}
			var bClass = (this.showBorder == e )? 'palyer_bg_color1' : 'palyer_bg_color';
			return obj + " "+bClass;
		},
		getId: function(index) {
			return "videoplay_" + index;
		},
		getVideoId: function(index) {
			return "my-video" + index;
		},
		enter: function(index) { //鼠标移入
			var id = "#" + this.getId(index);
			$(id + " .control").show();
		},
		leave: function(index) { //鼠标移出
			var id = "#" + this.getId(index);
			$(id + " .control").hide();
		},
		fullscreen: function(index) { //双击全屏
			window.winId = this.getId(index);
			if (Video.Player.isFullscreen(document)) {
				Video.Player.exitFullscreen(document);
			} else {
				Video.Player.launchIntoFullscreen(document.getElementById(winId));
			}
		},
		playByUrl: function(index) { //单机赋值播放
			if(callMode == 3){
				vm.showBorder = index;
				select_play(index);
			}
		},
		playpause: function() { //播放暂停
			// 	if(player.paused){
			// 		// 如果视频处于播放状态
			// 		player.play()
			// 		this.classList.remove('fa-play')
			// 		this.classList.add('fa-pause')
			// 	}else{
			// 		player.pause()
			// 		this.classList.add('fa-play')
			// 		this.classList.remove('fa-pause')
			// 	}
		}
	},
	watch: {
		screens: {
			handler: function(newValue, oldValue) {
				this.$nextTick(function() {
					/*现在数据已经渲染完毕*/
					$(".control").hide();
					init(newValue.length);
				})
			}
		}
	},
});

function play(player, src, type) {
	// var player =  videojs('my-video0');
	if (type == "FLV") {
		player.src({
			src: src,
			type: 'video/x-flv'
		});
	} else if (type == "HLS") {
		player.src({
			src: src,
			type: 'application/x-mpegURL'
		});
	} else if (type == "RTMP") {
		player.src({
			src: src,
			type: 'rtmp/flv'
		});
	} else {
		player.src(src);
	}
	player.load();
	player.play();
}

var players = [];
function init(index) {
	if (index <= 0) {
		return;
	}
	var myplayer = videojs('my-video' + (index-1), {
		teachOrder: ['html5', 'flvjs', 'flash']
	}, function() {
		players.push(this);
		var d = vm.items[index-1];
		if (!comm.isEmpty(d.url)) {
			play(this, d.url, d.type);
		}
		index--;
		init(index);
	});
}

//父页面传入数据
var video_data = Irfs.ChildWin.callBack("video_data"+sign, Irfs.ParentWin.funName.getDataFun);  
//根据调用方式处理数据
if (callMode == 1) {
	itemsData = handleData(video_data);
	setUrlForVideo(itemsData.length);
} else if (callMode == 2) {
	vm.items = video_data;
} else if (callMode == 3) {
	var d = [];
	for(var i=0;i<video_data;i++){
		d.push({url: "",type: "",video_addr:"视频地址"});
	}
	vm.items = d;
	//选中播放器
	Irfs.ChildWin.callBack("select_player",Irfs.ParentWin.funName.updateDataFun,function(e){
		if(vm.showBorder != e){
			vm.showBorder = e;
			var i = 1;
			var t = setInterval(function() {
				if(i%2==0){
					vm.showBorder = e;
				}else{
					vm.showBorder = -1;
				}
				i++;
				if(i>6){
					clearInterval(t);
				}
			}, 500);
			select_play(e);
		}
	});
	//播放全部
	Irfs.ChildWin.callBack("play_all",Irfs.ParentWin.funName.updateDataFun,function(data){
		var s = 0;
		if(data.length > vm.items.length){
			s = vm.items.length;
		}else{
			s = data.length;
		}
		for(var i=0;i<s;i++){
			playByCamera(i,data[i]);
		}
		return data.length - vm.items.length;
	});
}

//--------------------调用方式2数据处理-----------------
function handleData(data) {
	var videoArr = [];
	for (var i = 0; i < data.length; i++) {
		var obj = {
			url: "",
			type: "",
			video_addr: data[i].address
		};
		videoArr.push(obj);
	}
	return videoArr;
}

function setUrlForVideo(index) {
	if (index <= 0) {
		vm.items = itemsData;
		return;
	}
	var video_type = "FLV";
	itemsData[index - 1].type = video_type;
	Video.Url.getLiveUrlByNVR(video_data[index - 1],video_type,function(url){
		itemsData[index - 1].url = url;
		index--;
		setUrlForVideo(index);
	});
}

//监听窗口退出全屏解决无法监听Esc按键
window.onresize = function(){
	if(window.winId !=""){
		var expand = $("#" + winId + " .control .right .expand")[0];
		if (!Video.Player.isFullscreen(document)) {
			expand.classList.remove('fa-compress')
			expand.classList.add('fa-arrows-alt')
		} else {
			expand.classList.remove('fa-arrows-alt')
			expand.classList.add('fa-compress')
		}
	}
}
//--------------------调用方式3-----------------
//播放
function select_play(index){
	Irfs.ChildWin.callBack("v_player",Irfs.ParentWin.funName.updateDataFun,function(e){
		playByCamera(index,e);
		camera_data = e;
		return index;
	});
}

function playByCamera(index,e){
	var p = videojs('my-video' + index);
	var obj = vm.items[index];
	var v_type = Video.Type.getFLVAgree();
	obj.type = v_type;
	obj.video_addr = e.address;
	Video.Url.getLiveUrlByNVR(e,v_type,function(url){
		if (!comm.isEmpty(url)) {
			play(p, url, v_type);
		}
	});
}
//视频轮播
// var time = 3000;//轮播时长
// var j = 0;
// var t = setInterval('playVideoByLink()', time);

// playVideoByLink();
// function playVideoByLink() {
// 	play(video_param[j].url,video_param[j].type);
// 	j = j + 1;
// 	//如果超过数组长度，重新开始
// 	if (j >= video_param.length) {
// 		j = 0;
// 	}
// }

效果