define(['html!vendorDir/video/video.html','css!vendorDir/video/css/video.css'],function(video){ var video_stus={ //渲染div的id id:"", //定时器 timer:"", //时间轴移动的位置 x : 0, //时间轴移动的当前时间 StartTime :0, //时间轴移动的总时间 totalTime:"", //每秒移动的像素 perTime:"", //播放时间间隔(秒) t:2 , //播放总页数 dataCount : 0, //开始时间 startT:"", //结束时间 endT:"", //每页数据的时间段(小时) timeInter:1, //播放的当前页数 nowPage:1 } //播放器初始化 function init(id,callback){ video_stus.id=id; initPlayData(); $("#"+id+" .cover-content").html(video); initTime(); measurTotalTime(); bingEvents(video_stus); btnDisabled(); if(typeof callback === "function"){ callback.call(); } } //查询数据初始化 function dataInit(){ clearInterval(video_stus.timer); video_stus.StartTime = 0; video_stus.x = 0; $(".video-progress_btn").css("left",video_stus.x-12); initTime(); measurTotalTime(); btnDisabled(); } function initPlayData(){ video_stus.x=0; video_stus.StartTime = 0; video_stus.nowPage=1; } function initTime(){ var nowDate = new Date(); var endDate = nowDate.getTime(); var startDate = $("#video-query-startDate").val(); if(!startDate){ startDate = nowDate.setHours(nowDate.getHours()-(24*7)); $("#video-query-startDate").val(getTimeStr(startDate,2)) $("#video-query-endDate").val(getTimeStr(endDate,2)) } video_stus.startT=getTimeStr(startDate) video_stus.endT=getTimeStr(endDate) $(".start-time").html(video_stus.startT) $(".end-time").html(video_stus.endT) $(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+""); var t = new Date(video_stus.startT); var s = new Date(video_stus.endT); video_stus.dataCount=Math.ceil(Math.abs(t - s)/1000/60/(60*video_stus.timeInter)); } function bingEvents(){ $(".video-btn-stop").off("click").on("click",function(){ var o = $(this) if(o.hasClass("video-stop-img")){return;} stop(); ONEMAP.C.publisher.publish({ action:'stop', data:video_stus }, video_stus.id); }); $(".video-btn-back").off("click").on("click",function(){ var o = $(this); $(".video-progress_btn").show(); if(o.hasClass("video-back-img")){return;} back(); ONEMAP.C.publisher.publish({ action:'back', data:video_stus }, video_stus.id); }); $(".video-btn-play").off("click").on("click",function(){ var o = $(this); $(".video-progress_btn").show(); if(o .hasClass("video-play-img")){ if(video_stus.dataCount==0){return;} ONEMAP.C.publisher.publish({ action:'play', data:video_stus }, video_stus.id); play(); o.removeClass("video-play-img").addClass("video-parse-img"); }else{ clearInterval(video_stus.timer); ONEMAP.C.publisher.publish({ action:'parse', data:video_stus }, video_stus.id); o.removeClass("video-parse-img").addClass("video-play-img"); } }); $(".video-btn-next").off("click").on("click",function(){ var o = $(this); $(".video-progress_btn").show(); if(o.hasClass('video-next-img')){return;} next() ONEMAP.C.publisher.publish({ action:'next', data:video_stus }, video_stus.id); }); $(".video-query-btns").off("click").on("click",function(){ dataInit(); ONEMAP.C.publisher.publish({ action:'query', data:video_stus }, video_stus.id); }); $(".title-right-close").off("click").on("click",function(){ $("#"+video_stus.id).hide(); clearInterval(video_stus.timer); ONEMAP.C.publisher.publish({ action:'close', data:video_stus }, video_stus.id); }); $(".video-progress_btn").off("mousedown").on("mousedown",function(event){ clearInterval(video_stus.timer); $(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img"); var o = $(this) var yuanleft = 0; var leftVal = event.clientX - this.offsetLeft; var op = $(".video-progress") document.onmousemove = function(event){ var event = event || window.event; yuanleft = event.clientX - leftVal; if(yuanleft < 0){ yuanleft =-12; }else if(yuanleft > op.width()-12){ yuanleft = op.width()-12; } o.css("left",yuanleft); $(".video-progress-tip").css("left",yuanleft-22).show(); video_stus.x = yuanleft; //接近时间段的值 var pos =Math.floor(Math.abs((yuanleft)%(video_stus.perTime*video_stus.t))); // measureNowTime(); var index = Math.floor((yuanleft+12)/(video_stus.perTime*video_stus.t)); video_stus.nowPage = (index<0?0:index); if(pos==0){ ONEMAP.C.publisher.publish({ action:'onmousemove', data:video_stus }, video_stus.id); } measureNowTime(); if(video_stus.nowPage==video_stus.dataCount){ $(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+""); }else{ var nowdate = new Date(video_stus.startT); nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage); $(".video-progress-tip").html(getTimeStr(nowdate,1)) $(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+""); } window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } document.onmouseup = function(){ document.onmousemove = null; //弹起鼠标不做任何操作 } }) $(".video-progress_btn").off("mouseenter").on("mouseenter",function(e){ var o = $(this); var nowdate = new Date(video_stus.startT); nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage); // var x = $(".video-progress_btn").css("left"); $(".video-progress-tip").html(getTimeStr(nowdate,1)); // $(".video-progress-tip").css("left",x+20); // $(".video-progress-tip").show() }); $(".video-progress_btn").off("mouseleave").on("mouseleave",function(e){ var nowdate = new Date(video_stus.startT); // var x = $(".video-progress_btn").css("left"); // $(".video-progress-tip").css("left",x-12); nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage); $(".video-progress-tip").html(getTimeStr(nowdate,1)); $(".video-progress-tip").hide() }) // $(".video-progress_btn").off("mouseup").on("click",function(e){ // console.info(e.offsetX) // console.info($(this).is(':hidden')) // if($('.video-progress-tip').is(':hidden')){ // $(".video-progress-tip").css("left",e.offsetX-45).show(); // }else{ // $(".video-progress-tip").css("left",e.offsetX-45).hide(); // } // }) // $(".video-progress").off("click").on("click",function(e){ // video_stus.x=e.offsetX; // $(".video-progress_btn").css("left",e.offsetX-12); // measureNowTime(); // if(video_stus.nowPage==video_stus.dataCount){ // $(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+""); // }else{ // var nowdate = new Date(video_stus.startT); // nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage); // $(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+""); // } // ONEMAP.C.publisher.publish({ // action:'progressClick', // data:video_stus // }, video_stus.id); // }) } function play(){ $(".video-progress-tip").hide(); time(); } function time(){ video_stus.timer = window.setInterval(timeStart,1000); } //开始事件启动定时器 function timeStart(){ video_stus.StartTime ++; var proWidth = $(".video-progress").width(); video_stus.x += video_stus.perTime; if(video_stus.StartTime >= video_stus.totalTime){ video_stus.StartTime = video_stus.totalTime; clearInterval(video_stus.timer); stop(); return; } if(isNaN(video_stus.StartTime)){ video_stus.StartTime = 1; } var per = video_stus.t; var now = (video_stus.StartTime - video_stus.StartTime%per)/per; if(now > video_stus.totalTime){ now = video_stus.totalTime; } if(now>video_stus.dataCount){ now=video_stus.dataCount; } $(".video-progress-nowtime").empty(); $(".video-progress-nowtime").text(now); video_stus.nowPage=now; $(".video-progress_btn").css("left",(video_stus.x>388?388:video_stus.x)); var tip_left = $(".video-progress_btn").css("left"); $(".video-progress-tip").css("left",tip_left); //每video_stus.t秒平播放一次 if((video_stus.StartTime%video_stus.t) == 0){ ONEMAP.C.publisher.publish({ action:'show', data:video_stus }, video_stus.id); if(video_stus.nowPage==video_stus.dataCount){ $(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+""); }else{ var nowdate = new Date(video_stus.startT); nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage); $(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+""); } } btnDisabled(); } function getTimeStr(d,type){ var now = new Date(d); var year = now.getFullYear(); var month = (now.getMonth()+1) < 10 ? '0'+(now.getMonth()+1) : (now.getMonth()+1); var date = now.getDate() < 10 ? '0' + now.getDate() : now.getDate(); var hours = now.getHours() < 10 ? '0' + now.getHours() : now.getHours(); var minutes = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes(); var seconds = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds(); if(type==1){ return hours +':'+ minutes+':'+seconds; }else if(type==2){ return year + '-' + month +'-' + date + ' ' +hours +':'+ minutes+':'+seconds; }else{ return year + '/' + month +'/' + date + ' ' +hours +':'+ minutes+':'+seconds; } } function btnDisabled(){ if(video_stus.dataCount>0){ $(".video-btn-next").removeClass("video-next-img").addClass("video-next-img-blue"); if(video_stus.StartTime==0){ $(".video-btn-back").removeClass("video-back-img-blue").addClass("video-back-img"); $(".video-btn-stop").removeClass("video-stop-img-blue").addClass("video-stop-img"); $(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img"); }else if(video_stus.StartTime>0){ if(video_stus.nowPage>=video_stus.dataCount){ $(".video-btn-next").removeClass("video-next-img-blue").addClass("video-next-img"); } $(".video-btn-back").removeClass("video-back-img").addClass("video-back-img-blue"); $(".video-btn-stop").removeClass("video-stop-img").addClass("video-stop-img-blue"); } }else{ $(".video-btn-next").removeClass("video-next-img").addClass("video-next-img-blue"); $(".video-btn-back").removeClass("video-back-img-blue").addClass("video-back-img"); $(".video-btn-stop").removeClass("video-stop-img-blue").addClass("video-stop-img"); $(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img"); } } function stop(){ clearInterval(video_stus.timer); video_stus.StartTime = 0; video_stus.x = 0; $(".video-progress_btn").css("left",video_stus.x-12); measureNowTime(); btnDisabled(); } function next(){ $(".video-progress-tip").hide(); var per = video_stus.t; if(video_stus.StartTime == video_stus.totalTime-per){ video_stus.StartTime = video_stus.totalTime; video_stus.x = $(".video-progress").width()-12; $(".video-progress_btn").css("left",$(".video-progress").width()-12); var tip_left = $(".video-progress_btn").css("left"); $(".video-progress-tip").css("left",tip_left-20); }else{ video_stus.StartTime += per; video_stus.x += video_stus.perTime*per; $(".video-progress_btn").css("left",video_stus.x>388?388:video_stus.x); var tip_left = $(".video-progress_btn").css("left"); $(".video-progress-tip").css("left",tip_left-20); } measureNowTime(); btnDisabled(); var nowdate = new Date(video_stus.startT); nowdate = nowdate.setHours(nowdate.getHours()+(video_stus.nowPage+1)); $(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+""); } function back(){ $(".video-progress-tip").hide(); var per = video_stus.t; if(video_stus.StartTime < per){ video_stus.StartTime = 0; video_stus.x = 0; }else{ video_stus.StartTime -= per; video_stus.x -= video_stus.perTime*per; } $(".video-progress_btn").css("left",(video_stus.x==0?video_stus.x-12:video_stus.x)); var tip_left = $(".video-progress_btn").css("left"); $(".video-progress-tip").css("left",tip_left-20); measureNowTime(); btnDisabled(); var nowdate = new Date(video_stus.startT); nowdate = nowdate.setHours(nowdate.getHours()-(video_stus.nowPage-1)); $(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+""); } //计算当前页数 function measureNowTime(){ var tmp = video_stus.x/($(".video-progress").width()-12); video_stus.StartTime = Math.floor(video_stus.totalTime * tmp); var per = video_stus.t; var now = (video_stus.StartTime - video_stus.StartTime%per)/per; if(now >= video_stus.dataCount){ now = video_stus.dataCount; } $(".video-progress-nowtime").empty(); $(".video-progress-nowtime").text((now<0?0:now)); video_stus.nowPage=now; } function measurTotalTime(){ var total = video_stus.dataCount*video_stus.t; var totMin = Math.floor(total/60); var totSecond = total%60; var totTime = pad(totMin) + ":" + pad(totSecond); var totTime = pad(totMin) + ":" + pad(totSecond); $(".video-progress-lasttime").empty(); $(".video-progress-lasttime").val(totTime); $(".video-progress-lasttime").text(video_stus.dataCount); if(video_stus.dataCount > 0){ $(".video-progress-nowtime").text(0); video_stus.nowPage=1; } meaurePerTime(); } //计算圆点每隔一秒前进的像素数 function meaurePerTime(){ var totString = $(".video-progress-lasttime").val(); var totArr = totString.split(":"); var totMin = parseInt(totArr[0]); var totSecond = parseInt(totArr[1]); var proWidth = $(".video-progress").width(); video_stus.totalTime = totMin*60 + totSecond; video_stus.perTime = (proWidth-12)/video_stus.totalTime; } function pad(m){ if(m.length<2){ m="0"+m; return pad(m) }else{ return m } } function clearTimer(){ clearInterval(video_stus.timer); } return ONEMAP.M.video={ init:init, dataInit:dataInit, clearTimer:clearTimer, videoData:video_stus } })