tangdehang
/
android-cloud-H5


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
		<meta name="x5-orientation" content="portrait" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 删除苹果默认的工具栏和菜单栏 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 设置苹果工具栏颜��? -->
		<meta name="format-detection" content="telphone=no, email=no">
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<!-- 启用360浏览器的极速模��?(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑��? -->
		<meta name="HandheldFriendly" content="true">
		<!-- 微软的老式浏览��? -->
		<meta name="MobileOptimized" content="320">
		<!-- uc强制竖屏 -->
		<!-- <meta name="screen-orientation" content="portrait"> -->
		<!-- QQ强制竖屏 -->
		<!-- <meta name="x5-orientation" content="portrait"> -->
		<!-- 不能旋转，问题出在这 -->
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- windows phone 点击无高��? -->
		<meta name="msapplication-tap-highlight" content="no">

		<title></title>
		<style>

			body {
				font-size: .2592592593rem;
				margin: 0 auto;
				width: 100%;
				min-width: 320px;
			}
			
			.h-player {
				height: 100%;
				overflow: hidden;
				background: #000;
			}
			
			.container {
				width: 100%;
				height: 100%;
				position: relative;
				user-select: none;
			}
			
			#video1 {
				display: block;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;
				opacity: 1;
			}
			
			#box {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9999;
				/*width: 667px;
    height: 375px; http://192.168.31.8:8848/cloudmMobilePhone1.11/Player/trialInterface2.html
    position: absolute;
    left: -146px;
    top: 146px;
   background: red;*/
				/*    transform: rotate(-90deg);*/
				/* opacity: 0.3;*/
			}
			
			.scroll {
				position: absolute;
				overflow: scroll;
				-webkit-overflow-scrolling: touch;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
			}
			
			body:before {
				width: 100%;
				height: 100%;
				content: ' ';
				position: fixed;
				z-index: -1;
				top: 0;
				left: 0;
				background: #000;
			}
			
			#wine {
				user-select: none;
				-webkit-user-drag: none;
				position: absolute;
				z-index: 0;
				/*  visibility: hidden;*/
			}
			
			#video1 {
				/*	 transform: rotate(180deg);*/
			}
			
			canvas {
				display: block;
				width: 100%;
				height: 100%;
				z-index: 999;
			}
			/*主屏*/
			
			.control {
				width: 900px;
				overflow: hidden;
				margin: 0 auto;
				margin-top: 90px;
				margin-bottom: 17px;
			}
			
			.control-left-img {
				width: 26px;
				height: 26px;
			}
			
			.control-left-img img {
				width: 100%;
				height: 100%;
			}
			
			#mainScreen-main {
				/* overflow: hidden; */
				user-select: none;
				-webkit-user-drag: none;
				position: relative;
				z-index: 0;
				width: 100%;
				height: 100%;
				top: 0px;
				/* left: 652.667px; */
				/* left: 270PX; */
				/* transform-origin: 0% 0%; */
				background: #000;
			}
			
			#mocan {
				position: absolute;
				left: -269px;
				top: 2px;
				/* opacity: 0.2; */
				width: 901px;
				height: 555px;
				z-index: 9999;
				opacity: 0.7;
			}
			
			#no-ne {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				background: #000000;
				z-index: 99999;
				font-size: 18px;
				color: #FFFFFF;
				text-align: center;
			}
			
			.no-ne-text {
				margin-top: 60%;
			}
			
			.no-ne-an {
				width: 171px;
				height: 47px;
				background: #eb6100;
				line-height: 47px;
				text-align: center;
				color: #FFFFFF;
				margin: 0 auto;
				margin-top: 20px;
			}
			
			.container .muted {
				position: absolute;
				right: .46296rem;
				top: .46296rem;
				z-index: 9999999;
				/*background: #000;*/
				border-radius: 50%;
				   /* opacity: 0.5;*/
			}
			
			.muted {
				width: 2.62963rem;
				height: 2.62963rem;
				background-position: -1.78704rem -8.43519rem;
			}
			
			html {
				height: 100%
			}
			
			.control-right-img {
				width: 42px;
				height: 42px;
				margin: 0 auto;
				/* margin: 1rem; */
				margin-top: 0.6rem;
			}
			
			.control-right-img img {
				width: 100%;
				height: 100%;
			}
			
			.leftmains {
				width: 3.5rem;
				height: 100%;
				background: #333333;
				position: fixed;
				right: 0rem;
				top: 0;
					
transition: all 0.2s ease-in;
			}
			
			.PictureQualityMain {
				margin-top: 3rem;
			}
			
			.PictureQuality {
				margin: 0 auto;
				width: 2.5rem;
				height: 1.8rem;
				line-height: 1.8rem;
				color: #fff;
				text-align: center;
				font-size: 15px;
				margin-top: 1rem;
			}
			
			.avit {
				background: rgba(255, 255, 255, 1);
				color: #000 !important;
				border-radius: 3px;
			}
			
			.upload {
				margin: 0 auto;
				width: 3rem;
				height: 1.8rem;
				line-height: 1.8rem;
				color: #fff;
				text-align: center;
				font-size: 16px;
				margin-top: 3rem;
			}
			
			.upload img {
				width: 1.5rem;
				height: 1.5rem;
			}
			
			.upload div {
				margin-top: -0.5rem;
				font-size: 14px;
			}
			
			.operation {
				margin-top: 9rem;
			}
			
			.bottommains {
				width: 100%;
				height: 50px;
				background: #333333;
				position: fixed;
				left: 0;
				bottom: 0;
			}
			
			.botmat1 {
				width: 33%;
				float: left;
			}
			
			.botmat1img {
				margin: 0 auto;
				width: 1.5rem;
				height: 1.5rem;
				margin-top: 0.5rem;
			}
			
			.botmat1img img {
				width: 100%;
				height: 100%;
			}
			
			.mainbox {
				width: 18rem;
				height: 10rem;
				background: #fff;
				position: fixed;
				top: 38%;
				left: 5%;
				border-radius: 5px;
			}
			
			.boxTitle {
				text-align: center;
				font-size: 18px;
				padding: 10px 0px;
			}
			
			.boxText {
				text-align: center;
				font-size: 16px;
			}
			
			.boxbt {
				width: 60%;
				height: 2.5rem;
				background: #0886F5;
				margin: 0 auto;
				font-size: 16px;
				text-align: center;
				line-height: 2.5rem;
				color: #fff;
				border-radius: 5px;
				margin-top: 1rem;
			}
			
			.sbox {
				width: 18rem;
				height: 5.5rem;
				background: #fff;
				position: fixed;
				top: 38%;
				left: 5%;
				border-radius: 5px;
			}
			
			.sboxText {
				padding: 17px;
				font-size: 16px;
			}
			
			.sboxbu {
				text-align: right;
				color: #0886F5;
				font-size: 16px;
				margin-right: 2rem;
			}
			
			.boximg {
				position: absolute;
				width: 1rem;
				height: 1rem;
				left: 45%;
				bottom: -22%;
			}
			#showsuss{
				display: none;
			}
		</style>
	</head>

	<body class="scroll h-player" style="overscroll-behavior: contain;">

		<div class="container" id="player">
			<div class="muted" id="btnMuted">
				<div class="control-right-img" data-id="1">
					<img src="../static/img/xuanfu_icon.png">
				</div>
			</div>

			<div id="wine">
				<video id="video1" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true" webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" style="pointer-events: none;"></video>
			

				<div id="box"></div>

			</div>
			<div class="leftmains">
				<div class="PictureQualityMain">
					<div class="PictureQuality " data-id="3072000">高清</div>
					<div class="PictureQuality avit" data-id="2243000">标清</div>
					<div class="PictureQuality" data-id="400000">极速</div>
					<div class="PictureQuality" data-id="400000">自动</div>
				</div>

				<div class="operation">
					<div class="upload" id="showsuss" data-text="uploads">
						<img src="../static/img/wx/shangchuan_icon.png">
						<div>上传</div>
					</div>
					<div class="upload" onclick="cp(document.getElementById('user_ref_id'));" data-text="Shearplate">
						<img src="../static/img/wx/jianqieban_icon.png">
						<div>剪切板</div>
					</div>
					<div class="upload" id="upload" data-text="Signout">
						<img src="../static/img/wx/tuichu_icon.png">
						<div>退出</div>
					</div>
				</div>

			</div>
			<div class="bottommains">
				<div class="botmat1">
					<div class="botmat1img" data-text="gengduo">
						<img src="../static/img/wx/gengduo_icon.png">
					</div>

				</div>
				<div class="botmat1">
					<div class="botmat1img" data-text="home">
						<img src="../static/img/wx/home_icon.png">
					</div>

				</div>
				<div class="botmat1">
					<div class="botmat1img" data-text="return">
						<img src="../static/img/wx/fanhui_icon.png">
					</div>

				</div>
			</div>

			<div class="mainbox" style="display: none;">
				<div class="boxTitle">提示</div>
				<div class="boxText">
					<div>由于小程序的功能限制，此功能暂时</div>
					<div>无法使用，请下载APP使用更多功能</div>

				</div>
				<div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>

				<div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
			</div>

			<div class="sbox" style="display: none;">
				<div class="sboxText">下载地址已复制到剪切板</div>
				<div class="sboxbu">确定</div>
			</div>

		</div>
		
		<div id="copy-txt" style="position: absolute;opacity: 0;">
			<span id="user_ref_id">www.androidsCloud.com</span>
		</div>
		
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script src="https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.0.3.js"></script>
		<script src="../static/js/jquery-1.11.0.min.js"></script>
		<!--  音频-->
		<script src="../static/js/classlist.js"></script>
		<script src="../static/js/players.js"></script>
		<script src="../static/js/auroraplayer.js"></script>
		<script src="../static/js/aurora.js"></script>
		<script src="../static/js/aac.js"></script>
		<script src="../static/js/web.js?id=101"></script>
		<!-- <script src="../static/js/webapk.js"></script> -->
		<!--  视频-->

		<script type="text/javascript" src="../static/js/Decoder.js"></script>
		<script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
		<script type="text/javascript" src="../static/js/Player.js"></script>
		<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
		<script src="../static/distss/WXdraw.js?id=105"></script>
	
		<script>
			// document.addEventListener('touchstart', function() {
			// 	console.log("我主动的play()了");
			// 	players.play();
			// 	players.startPlaying();
			// 	var messageData = new Uint8Array(se)
			// 	player.decode(messageData);
			// 	// return this.asset.start(false);
			// 	this.playing = true;
			// });
			// window.addEventListener('click', playAudio, false);

			// function playAudio(obj) {
			// 	console.log("我主动的click()了");
			// 	players.play();
			// 	players.startPlaying();
			// 	var messageData = new Uint8Array(se)
			// 	player.decode(messageData);
			// }

			// document.addEventListener("WeixinJSBridgeReady", function() {
			// 	WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
			// 		players.play();
			// 		players.startPlaying();
			// 		var messageData = new Uint8Array(se)
			// 		player.decode(messageData);
			// 	});
			// }, false);


			// window.AudioContext = window.AudioContext || window.webkitAudioContext;
			// console.log("window.AudioContext", window.AudioContext);
			// console.log("window.AudioContext.destination", window.AudioContext.destination);
			// if (window.AudioContext) {
			// 	window.audioContext = new window.AudioContext();
			// 	// Create empty buffer
			// 	var buffer = window.audioContext.createBuffer(1, 1, 22050);
			// 	var source = window.audioContext.createBufferSource();
			// 	source.buffer = buffer;
			// 	// Connect to output (speakers)
			// 	source.connect(window.audioContext.destination);
			// 	// Play sound
			// 	console.log("source.start", source, source.start, source.play, source.noteOn);
			// 	if (source.start) {
			// 		source.start(0);
			// 	} else if (source.play) {
			// 		source.play(0);
			// 	} else if (source.noteOn) {
			// 		source.noteOn(0);
			// 	}
			// }
			// var fixAudioContext = function(e) {
			// 	if (window.audioContext) {
			// 		// Create empty buffer
			// 		var buffer = window.audioContext.createBuffer(1, 1, 22050);
			// 		var source = window.audioContext.createBufferSource();
			// 		source.buffer = buffer;
			// 		// Connect to output (speakers)
			// 		source.connect(window.audioContext.destination);
			// 		// Play sound
			// 		console.log("source.start", source.start, source.play, source.noteOn);
			// 		if (source.start) {
			// 			source.start(0);
			// 		} else if (source.play) {
			// 			source.play(0);
			// 		} else if (source.noteOn) {
			// 			source.noteOn(0);
			// 		}
			// 	}
			// 	// Remove events

			// };


			var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
			$('#wine').css({
				"width": window.screen.width,
				"height": window.screen.height - topwinHeight - 20,
				"position": "absolute",

			})
			var winese = document.createElement("wine");
			wine.style.top = "-" + winese + 'px';

			var url = window.location.href;
			url = url.split('/')
			// var baseUrl = window.location.href; //"http://192.168.31.20"
			// var baseUrl = 'https://'+url[2] //url[2] //'http://192.168.31.159'//'http://' + url[2] 
			var query = window.location.search.substring(1);
			// query = "clientType=1&cardIp=14.215.128.96&port=2012&sn=RK3930C2301900012&demoTime=3600&id=377&diskName=SC93mBww"
			var vars = query.split("&");
			console.log(vars)
			// var baseUrl = 'http://192.168.31.20'
			var baseUrl = 'test.androidscloud.com'
			var data = {}
			//			 审核
			$.ajax({
				url: baseUrl + "/api/user/v1/config/download/isShow",
				data: {},
				type: 'get',
				dataType: 'json',
				success: function(data) {

					if (data.data) {
						$("#showsuss").show()
					} else {
						$("#showsuss").hide()
					}
					//                       
				}
			})
			var clientType = vars.find(e => {
				return e.startsWith('clientType')
			}) || ''
			// console.log(clientType)
			data.clientType = clientType.substring(11, clientType.length)
			//			小程序直接进入
			var diskName = vars.find(e => {
				return e.startsWith('diskName')
			}) || ''

			data.diskName = diskName.substring(9, diskName.length)

			// document.title = decodeURI(data.diskName)
			if (data.clientType == 1) {
				var cardIp = vars.find(e => {
					return e.startsWith('cardIp')
				}) || ''
				var port = vars.find(e => {
					return e.startsWith('port')
				}) || ''

				var sn = vars.find(e => {
					return e.startsWith('sn')
				}) || ''
				var demoTime = vars.find(e => {
					return e.startsWith('demoTime')
				}) || ''
				var id = vars.find(e => {
					return e.startsWith('id')
				}) || ''


				data.clientType = clientType.substring(11, clientType.length)

				data.cardIp = cardIp.substring(7, cardIp.length)

				data.port = port.substring(5, port.length)

				data.sn = sn.substring(3, sn.length)

				data.demoTime = demoTime.substring(9, demoTime.length)
				data.id = id.substring(3, id.length)

			} else if (data.clientType == 2) { //分享屏幕
				console.log("走到分享屏幕里面啦==========", data.clientTypes);
				$(".leftmains").css({
					"right": "-4rem"
				})
				$('.leftmains').hide()
				$('.bottommains').hide()
				$('#btnMuted').hide()
				let ip = vars.find(e => {
					return e.startsWith('ip')
				}) || ''
				var username = vars.find(e => {
					return e.startsWith('username')
				}) || ''
				var id = vars.find(e => {
					return e.startsWith('id')
				}) || ''
				var userCardId = vars.find(e => {
					return e.startsWith('userCardId')
				}) || ''
				data.id = id.substring(3, id.length)
				data.username = username.substring(9, username.length)
				data.ip = ip.substring(3, ip.length)
				data.userCardId = userCardId.substring(11, userCardId.length)
				// console.log(data.ip)
				// alert("测试3")
				// alert("data.userCardId"，data.userCardId, "data.ip",data.ip)
			} else {
				// $(".leftmains").css({
				// 					"right":"-4rem"
				// 				})
				// 	$('.leftmains').hide()
				// 	$('.bottommains').hide()
				// 	$('#btnMuted').hide()
				var username = vars.find(e => {
					return e.startsWith('username')
				}) || ''

				var userCardId = vars.find(e => {
					return e.startsWith('userCardId')
				}) || ''
				data.username = username.substring(9, username.length)
				data.userCardId = userCardId.substring(11, userCardId.length)
				console.log(data.ip)
			}


			//           心跳
			//			var time = 1000 * 30;
			//			var interval;
			//			fun()
			//
			//			function run() {
			//
			//				interval = setInterval(fun, time);
			//			}
			//
			//			function fun() {
			//				$.ajax({
			//					url: baseUrl + "/api/game/v1/cloudGame/dev/get/cardSn",
			//					data: {
			//						sn: data.sn
			//					},
			//					type: 'get',
			//					dataType: 'json',
			//					success: function(data) {
			//
			//					}
			//				})
			//
			//			};
			//			run();
			// data.clientType=1
			// data.sn="RK3930C2301900044"
			// data.cardIp="14.215.128.96"
			// data.port=2044

			var orientation = 0 //0 竖屏，1横屏
			var winHeight = window.screen.height - window.innerHeight
			// var urlss = url[2]
			// var urlss='192.168.31.20'
			// var urlss = "14.215.128.96"
			var urlss = 'test.androidscloud.com'
			document.body.addEventListener('touchmove', function(e) {
				e.preventDefault()
			}, {
				passive: false
			})

			// 
			// urlss = "14.215.128.96"
			// console.log()
			// data.clientType = 1
			// data.sn="RK3930C2301900044"
			// data.cardIp="14.215.128.96"
			// data.port=2044
			if (data.clientType == 3) {
				var players = AV.Player.fromWebSocket("wss://" + urlss + '/authVideoWebSocket?' + "clientType=" + data.clientType +
					"&username=" + data.username + "&userCardId=" + data.userCardId);
			} else if (data.clientType == 2) {
				// var players = AV.Player.fromWebSocket("wss://" + urlss + '/shareWebSocket?' + "clientType=" + data.clientType +
				// 	"&username=" + data.username + "&userCardId=" + data.userCardId + "&ip=" + data.ip);

				var players = AV.Player.fromWebSocket(
					"wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005");
			} else {
				var players = AV.Player.fromWebSocket("wss://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
					"&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
			}
			// // 			debugger
			// var players = AV.Player.fromWebSocket('ws://14.215.128.96/authVideoWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377');
			players.play();
			players.volume = 100
			//var players = AV.Player.fromWebSocket('ws://14.215.128.96/videoWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060');

			var warid = {
				id: data.id,
				type: 1,
				sn: data.sn
			}
			//结束时间 type=2
			var warids = {
				id: data.id,
				type: 2,
				sn: data.sn
			}

			//			$.ajax({})

			// 关闭浏览器
			//			window.onbeforeunload = function() {}

			//撤销的array
			var cancelList = new Array();
			//撤销的次数
			var cancelIndex = 0;
			var inputType = 0 //输入类型 0:手写，1:键盘输入
			//判断是否ie
			var IE_HACK = (/msie/i.test(navigator.userAgent) &&
				!/opera/i.test(navigator.userAgent));
			//			云手机相关逻辑	 
			var player = new Player({
				size: {
					width: 1280,
					height: 720
				}
			});
			var secanv = document.getElementById("wine");
		
			secanv.appendChild(player.canvas);
			console.log("player=========>>>>", player);
			console.log("secanv>>>>", secanv);
			//             &cardIp="+data.data.extranetIp+"&port="+data.data.extranetPort+"&sn="+data.data.sn

			$(function() {
				initCanvas();
			});
			//初始化
			var initCanvas = function() {

			}

			window.onload = function() {};

			$("#voew").on("click", function() {})

			$("#box").on("click", function() {
				//				draw_graph('pencil', this)

			})

			console.log(player)
			$('#mocan').on('click', function() {
				draw_graph('pencil', this)
			})

			// //初始化一下就可以了，
						 let vConsole = new VConsole();
			//			 //你打印的数据 比如
						 console.log('test');
			//就可像小程序一样的看了和调试了。
			$('.no-ne-an').on('click', function() {
				//结束时间 type=2
				let warids = {
					id: data.id,
					type: 2,
					sn: data.sn
				}
				$.ajax({
					url: baseUrl + "/api/game/v1/cloudGame/dev/getSn",
					data: warid,
					type: 'get',
					dataType: 'json',
					success: function(data) {
						history.go(-1)
						if (data.status == 0) {

						} else {
							alert(data.msg)
						}
						//
					}
				})
			})

			var btnMuted = document.querySelector("#btnMuted");
			btnMuted && (function() {
				var setHistory = function(left, top) {
					try {
						localStorage.setItem("muted-btn-loc", JSON.stringify({
							left: left,
							top: top
						}));
					} catch (ex) {}
				};
				var getHistory = function() {
					try {
						var value = localStorage.getItem("muted-btn-loc");
						if (!value) return null;
						value = JSON.parse(value);
						if (!value) return null;
						return value;
					} catch (ex) {
						return null
					}
				};
				var fixLoc = function(loc) {
					var rect = btnMuted.getBoundingClientRect();
					rect = {
						top: rect.top,
						left: rect.left,
						width: rect.width,
						height: rect.height
					}; //部分低版本浏览器,该属性为只读
					if (loc) {
						rect.left = loc.left;
						rect.top = loc.top;
					}
					var minX = 0;
					var minY = 0;
					var docRect = document.documentElement.getBoundingClientRect();
					var maxY = docRect.height - rect.height;
					var maxX = docRect.width - rect.width;
					var left = rect.left;
					var top = rect.top;
					left = Math.min(left, maxX);
					left = Math.max(left, minX);
					top = Math.min(top, maxY);
					top = Math.max(top, minY);
					console.log(rect.top, top, loc);
					if (loc || top !== rect.top || left !== rect.left) {
						btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
					}
				}
				window.addEventListener("resize", function() {
					fixLoc();
				});
				var touchPoint = {
					pageY: 0,
					pageX: 0
				};
				var currentLoc = {
					top: 0,
					left: 0,
					curTop: 0,
					curLeft: 0
				};
				var toMove = false;
				var touchmove = function(e) {
					e.preventDefault();
					var point = e.changedTouches[0];
					var top = -touchPoint.pageY + point.pageY;
					var left = -touchPoint.pageX + point.pageX;
					if (toMove) {
						top += currentLoc.top;
						left += currentLoc.left;
						currentLoc.curLeft = left;
						currentLoc.curTop = top;
						btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
					} else {
						if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
							toMove = true;
						}
					}

				};
				var touchend = function() {
					window.removeEventListener("touchmove", touchmove, {
						passive: false
					});
					window.removeEventListener("touchend", touchend, {
						passive: false
					});

					if (toMove) {
						setHistory(currentLoc.curLeft, currentLoc.curTop);
						fixLoc();
					} else {
						//按点击处理

						var set = $('.control-right-img').attr("data-id")
						if (set == '1') {
							$('.control-right-img').attr({
								"data-id": "2"
							})
							//							$('.control-right-img').find('img').attr({
							//								"src": "../static/img/musicturn.png"
							//							})
							players.volume = 100
							$(".leftmains").css({
								"right": "-4rem"
							})
							// console.log(players)
							// players.play();
						} else {

							$('.control-right-img').attr({
								"data-id": "1"
							})

							$(".leftmains").css({
								"right": "0rem"
							})
							//							$('.control-right-img').find('img').attr({
							//								"src": "../static/img/musicfalse.png"
							//							})
							players.volume = 0
							// players.off('pause');
							// players.pause();
							// var embed = document.embedPlay;
							console.log(players, "fdsfdsf")
						}
					}
				}
				btnMuted.addEventListener("touchstart", function(e) {
					e.preventDefault();
					toMove = false;
					var point = e.changedTouches[0];
					touchPoint.pageX = point.pageX;
					touchPoint.pageY = point.pageY;
					var rect = e.target.getBoundingClientRect();
					currentLoc.top = rect.top;
					currentLoc.left = rect.left;
					window.addEventListener("touchmove", touchmove, {
						passive: false
					});
					window.addEventListener("touchend", touchend, {
						passive: false
					});

				}, {
					passive: false
				});
				var history = getHistory();
				if (history) {
					fixLoc(history);
				}
				btnMuted.classList.remove("hide");
			})();

			$(".boximg").on("click", function() {
				$(".mainbox").css({
					"display": "none"
				})
			})

			//			剪切板
			$(".sboxbu").on("click", function() {
				$(".sbox").css({
					"display": "none"
				})
			})
			//			剪切板
			$(".uploadss").on("click", function() {
				$(".sbox").css({
					"display": "none"
				})
			})

			$("#upload").on("click", function() {
				if(navigator.userAgent.toLowerCase().includes('toutiaomicroapp')){
					tt.miniProgram.switchTab({
						url: '/pages/home/home'
					})
				}else{
					wx.miniProgram.switchTab({
						url: '/pages/home/home'
					})
				}
			})


			function selectText(x) {
				if (document.selection) {
					var range = document.body.createTextRange();
					range.moveToElementText(x);
					range.select();
				} else if (window.getSelection) {
					var selection = window.getSelection();
					var range = document.createRange();
					selection.removeAllRanges();
					range.selectNodeContents(x);
					selection.addRange(range);
				}
			}

			function cp(x) {
				$(".mainbox").css({
					"display": "none"
				})
				$(".sbox").css({
					"display": "block"
				})
				selectText(x);
				document.execCommand("copy");

			}
		</script>

	</body>

</html>