cxc
/
ifm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html>
<head>
<title>ssjkBody</title>
<style type="text/css">
.playMain {
	width: 100%;
	height: 70%;
	margin-left: 0;
	margin-top: 5px;
	text-align: center;
	background: black;
}

.buttonGroup {
	width: 100%;
	height: 40px;
	margin-left: 0;
	margin-top: 10px;
	text-align: center;
}

.buttonSelect {
	width:22%;
	height:35px;
	display:inline;
	border: 0px solid #1e7db9;
	box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
	background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
	background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
	background: linear-gradient(top, #42a4e0, #2e88c0);
}

.buttonUnselect {
	width:22%;
	height:35px;
	display:inline;
	border: 0px solid #1e7db9;
	box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
	background: -webkit-linear-gradient(top, #eeeeee, #eeeeee);
	background: -moz-linear-gradient(top, #eeeeee, #eeeeee);
	background: linear-gradient(top, #eeeeee, #eeeeee);
}
</style>
<script type="text/javascript">
var ydjk = document.getElementById("ydjk");
var state = 1; // 消除连击
var chan = 1;
var channel = $("#defaultChannel").val();; // 1-16号通道
var fileName;
var testFirst = true;
var newchannel = $("#defaultChannel").val();
var devName = $("#devName").val();
$("#ydjk").attr("src", "monitor/" + devName + newchannel +".m3u8");

$(function() {
	var width = document.body.clientWidth;
	$("#ydjk").height(width*3/4);
	localStorage.setItem("ip", $("#ip").val());
});

// 监听播放事件
ydjk.addEventListener("play", function() {
	jQuery.ajax({
		url: "ydjkPlay.htm",
		dataType: "json",
		type: "post",
		async: false,
		data : {
			"ip" : $("#ip").val(),
			"channel" : channel
			},
		success: function(data){
			testFirst = false;
		}
	});
}, false);

// 监听播放结束事件
//ydjk.addEventListener("ended", function() {
//	alert("ended");
//}, false);

//监听播放暂停事件
ydjk.addEventListener("pause", function() {
		jQuery.ajax({
			url: "ydjkPause.htm",
			dataType: "json",
			type: "post",
			async: false,
			data : {
				"ip" : localStorage.getItem("ip"),
				"channel" : channel
				},
			success: function(data){
				if (fileName != "") {
					$("#ydjk").attr("src", fileName);
					channel = newchannel;
					ydjk.play();
					fileName = "";
				}
			}
		});
}, false);

	if ($("#mark1").val() == "" || $("#mark1").val() == null
			|| $("#mark1").val() == "null") {
		$("#mark1").css("display", "none");
	}
	if ($("#mark2").val() == "" || $("#mark2").val() == null
			|| $("#mark2").val() == "null") {
		$("#mark2").css("display", "none");
	}
	if ($("#mark3").val() == "" || $("#mark3").val() == null
			|| $("#mark3").val() == "null") {
		$("#mark3").css("display", "none");
	}
	if ($("#mark4").val() == "" || $("#mark4").val() == null
			|| $("#mark4").val() == "null") {
		$("#mark4").css("display", "none");
	}

function realPlay(id, chan) {
	if (id == 1 && state != 1) {
		ydjk.pause();
		$("#mark1").addClass("buttonSelect");
		$("#mark1").removeClass("buttonUnselect");
		$("#mark" + state).addClass("buttonUnselect");
		$("#mark" + state).removeClass("buttonSelect");
		state = 1;
		newchannel = chan;
		fileName = "monitor/" + devName + chan +".m3u8";
	}
	if (id == 2 && state != 2) {
		$("#mark2").addClass("buttonSelect");
		$("#mark2").removeClass("buttonUnselect");
		$("#mark" + state).addClass("buttonUnselect");
		$("#mark" + state).removeClass("buttonSelect");
		state = 2;
		newchannel = chan;
		fileName = "monitor/" + devName + chan +".m3u8";
		if (testFirst == false) {
			ydjk.pause();
		} else {
			$("#ydjk").attr("src", fileName);
			channel = newchannel;
			ydjk.play();
			fileName = "";
		}
	}
	if (id == 3 && state != 3) {
		$("#mark3").addClass("buttonSelect");
		$("#mark3").removeClass("buttonUnselect");
		$("#mark" + state).addClass("buttonUnselect");
		$("#mark" + state).removeClass("buttonSelect");
		state = 3;
		newchannel = chan;
		fileName = "monitor/" + devName + chan +".m3u8";
		if (testFirst == false) {
			ydjk.pause();
		} else {
			$("#ydjk").attr("src", fileName);
			channel = newchannel;
			ydjk.play();
			fileName = "";
		}
	}
	if (id == 4 && state != 4) {
		$("#mark4").addClass("buttonSelect");
		$("#mark4").removeClass("buttonUnselect");
		$("#mark" + state).addClass("buttonUnselect");
		$("#mark" + state).removeClass("buttonSelect");
		state = 4;
		newchannel = chan;
		fileName = "monitor/" + devName + chan +".m3u8";
		if (testFirst == false) {
			ydjk.pause();
		} else {
			$("#ydjk").attr("src", fileName);
			channel = newchannel;
			ydjk.play();
			fileName = "";
		}
	}
	if (channel == 0) {
		channel = chan;
		$("#ydjk").attr("src", "monitor/" + devName + channel +".m3u8");
		ydjk.play();
	}
}

</script>
</head>
<body style="width:100%; height:100%;">
	<input type="hidden" value="$!type" id="type">
	<input type="hidden" value="$!ip" id="ip">
	<input type="hidden" value="$!devName" id="devName">
	<input type="hidden" value="$!chan1" id="defaultChannel">
	<div style="text-align : center;">
		实时监控
   	</div>
   	<div class="playMain">
   		<video id="ydjk" style="width:100%; height:75%;" src="monitor/Jinhua.m3u8" controls="controls"/>
   	</div>
	<div class="buttonGroup">
		<input id="mark1" class="buttonSelect" type="button" value="$chan1name" onclick="realPlay(1, $chan1);"/>
		<input id="mark2" class="buttonUnselect" type="button" value="$chan2name" onclick="realPlay(2, $chan2);"/>
		<input id="mark3" class="buttonUnselect" type="button" value="$chan3name" onclick="realPlay(3, $chan3);"/>
		<input id="mark4" class="buttonUnselect" type="button" value="$chan4name" onclick="realPlay(4, $chan4);"/>
	</div>
</body>
</html>