视频播放器，基于videojs,NVR

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

HTML

JS

/**
 * 分屏
 * @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;i6){
					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= video_param.length) {
// 		j = 0;
// 	}
// }

效果