视频播放器，基于videojs,NVR

以你之姓@ 2022-01-12 07:41 421阅读 0赞

web播放监控视频，基于EasyNVR获取直播链接进行播放。对播放器进行封装。源码下载 [码云][Link 1]或[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;
    // 	}
    // }

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

[Link 1]: https://gitee.com/i1520/videoPlayer
[GitHub]: https://github.com/i1520/videoPlayer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20220109/15cfdad437d2499ca6abba823336f6e9.png