$(document).ready(function() { /* * pc缁旑垰鍨介弬锟 */ function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ]; var flag = true; for(var v = 0; v < Agents.length; v++) { if(userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } /* * 闂呭繑婧€閺侊拷 * */ function _charecter() { var character = String.fromCharCode(Math.floor(Math.random() * 26) + "A".charCodeAt(0)); return character; } /* * 鐞涳拷0 */ function addzero(num) { if(num < 10) { return("0" + num); } else { return num; } } /* * 鐟欏棝顣舵禍瀣╂閻╂垵鎯夋禍瀣╂ * * @eventName 鐟欏棝顣舵禍瀣╂閸氬秶袨 * @m 鐟欏棝顣剁€电钖 * @fun 閸ョ偠鐨熼崙鑺ユ殶 * */ var eventTester = function(eventName, m, fun) { if(window.addEventListener) { m.addEventListener(eventName, function() { if(fun) { fun(this); } //console.log((new Date()).getTime(),eventName); }, false); } else { m.attachEvent('on' + eventName, function() { if(fun) { fun(this); } // console.log((new Date()).getTime(),eventName); }); } } /* * 鐟欏棝顣堕幘顓熸杹 * */ //鐟欏棝顣堕幘顓熸杹 $(".m-video").on("click", function() { if($(".video-box").length > 0) { return; } document.ondragstart = function() { return false; }; window.onresize = function() { iteme = setTimeout(function() { if(!checkFull()) { //鐟曚焦澧界悰宀€娈戦崝銊ょ稊 $("body").removeClass("noscroll"); $(".video-box").removeClass("quanping"); $(".video-fullscreen").find("i").removeClass("i-suoxiao").addClass("i-quanping"); } else { $("body").addClass("noscroll"); $(".video-box").addClass("quanping"); $(".video-fullscreen").find("i").removeClass("i-quanping").addClass("i-suoxiao"); } }, 0) } function checkFull() { var explorer = window.navigator.userAgent.toLowerCase(); console.log(window.screen.width, window.outerWidth, window.screen.height, window.outerHeight) if(explorer.indexOf('chrome') > 0) { //chrome if((window.screen.width - window.outerWidth <= 17) && (window.screen.height - window.outerHeight <= 17)) { return true; } else { return false; } } else { //IE 9+ fireFox if(window.outerWidth == screen.width) { return true; } else { return false; } } } function quanpin(elem) { if(IsPC()) { var elem = document.documentElement; } else { if(elem.paused && elem.networkState <= elem.HAVE_METADATA) { elem.play(); setTimeout(function() { elem.pause(); elem.webkitEnterFullScreen(); return; }, 0); } else { elem.webkitEnterFullScreen(); return; } } if(elem.requestFullscreen) { //"W3C"; elem.requestFullscreen(); } else if(elem.mozRequestFullScreen) { //FireFox elem.mozRequestFullScreen(); } else if(elem.webkitRequestFullScreen) { //Chrome缁涳拷 elem.webkitRequestFullScreen(); } else if(elem.msRequestFullscreen) { //IE11 console.log(11); elem.msRequestFullscreen(); } } function exitquanping() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if(document.msExitFullscreen) { document.msExitFullscreen(); } } var menuarr; var menustr=""; if($(this).attr("data-menu")){ menuarr=$(this).attr("data-menu").split(" "); $(menuarr).each(function(k){ menustr+="
  • "+this+"
  • "; }) } var datasrc = $(this).attr("data-src"),src=''; var dangqian=""; if(src.indexOf("mp4")<0&&$(this).attr("data-menu")){ dangqian=menuarr[0]; src = datasrc+dangqian+".mp4"; }else{ src = datasrc; } if(!src) { alert("娌℃湁鎵惧埌鐩稿叧鐨勮棰?); } console.log(src); var menu=["
    ", "", "
    ", "", "
    ", "
    "]; if(!$(this).attr("data-menu")){ menu=[] } var vClass = $(this).attr("data-heibian") ? "heibian" : ""; var videoid = "my" + _charecter() + _charecter(); var iteme = null; var str = ["
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "", "
    ", "
    ", "", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "", "", "00:00", "  /  ", "00:00", "", "
    ", "", "
    ", menu.join(""), "
    ", "", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    " ] $("body").append(str.join("")); var meido = document.getElementById(videoid); meido.volume = .5; var videobox = $("#" + videoid + "box"); /*鐟欏棝顣剁紓鎾崇摠閹存劕濮涢崣顖欎簰閼惧嘲褰囬梹鍨閸滃本鎸遍弨锟?/ eventTester("waiting", meido, function() { console.log(" 缁涘绶熼弫鐗堝祦閿涘苯鑻熼棃鐐烘晩鐠囷拷"); $(".video-loading").removeClass("yihuanchun"); }); eventTester("playing", meido, function() { console.log("閹绢厽鏂佹禍锟?); videobox.addClass("video-playing").removeClass("video-pause"); $(".video-loading").addClass("yihuanchun"); }); eventTester("stalled", meido, function() { console.log("/缂冩垿鈧喎銇戦柅锟?); }); eventTester("ended", meido, function() { //console.log("閹绢厽鏂佺紒鎾存将"); // $(".video-close").click(); }); eventTester("canplay", meido, function() { //console.log("閸欘垯浜掗幘顓熸杹"); $(".video-container",videobox).addClass("video-ready"); meido.canplay=true; meido.play(); $(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting").css("transition","none"); }); eventTester("loadedmetadata", meido, function() { //console.log("閹存劕濮涢懢宄板絿閺冨爼鏆?) $(".video-time-panel-total").html(addzero(parseInt(meido.duration / 60)) + ":" + addzero(parseInt(meido.duration % 60))); }); eventTester("suspend",meido,function(){ // $(".video-loading").removeClass("yihuanchun"); console.log("瀵ゆ儼绻滄稉瀣祰") }) eventTester("loadstart",meido,function(){ console.log("鐎广垺鍩涚粩顖氱磻婵顕Ч鍌涙殶閹癸拷") $(".video-loading").removeClass("yihuanchun"); }) eventTester("progress",meido,function(){ $(".video-container",videobox).addClass("video-ready"); console.log("鐎广垺鍩涚粩顖涱劀閸︺劏顕Ч鍌涙殶閹癸拷") }) /*鏉╂稑瀹抽惄绋垮彠*/ eventTester("timeupdate", meido, function() { //console.log("閹绢厽鏂侀弮鍫曟?閺€鐟板綁"); if(meido.canplay){ var currentTime = meido.currentTime; var buffered = meido.buffered.end(0); var duration = meido.duration; for(var i = 0; i < meido.buffered.length; i++) { if(currentTime < meido.buffered.end(i)) { buffered = meido.buffered.end(i); break; } } var buff_pro = parseInt((buffered / duration) * 100); $(".video-time-panel-current").html(addzero(parseInt(currentTime / 60)) + ":" + addzero(parseInt(currentTime % 60))); $(".video-progress-play").css("width", currentTime / duration * 100 + "%"); $(".video-progress-buffer").css("width", buff_pro + "%"); } }); var mx = 0; $(document).on("mousemove", function(e) { mx = e.screenX; }) eventTester("play", meido, function(e) { videobox.addClass("video-playing").removeClass("video-pause"); $(".video-bofang.f-czspjuzhong").addClass("video-hide"); //var ny=e.cy var px = mx; clearTimeout(iteme); iteme = setTimeout(function() { if(px == mx) { $(".video-div").addClass("video-hide-ui"); } }, 5000); }); eventTester("pause", meido, function() { videobox.addClass("video-pause").removeClass("video-playing"); $(".video-bofang.f-czspjuzhong").removeClass("video-hide"); }); eventTester("ended", meido, function() { videobox.removeClass("video-pause video-playing"); $(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang"); // $(".video-bofang.f-czspjuzhong").removeClass("video-hide"); }); /* * 閹绢厽鏂侀弳鍌氫粻閸掑洦宕 * * */ $(".video-bofang,.video-video").on("click", function(e) { if(IsPC() || e.currentTarget.classList[0] == "video-bofang" || e.target.classList[0] == "video-bofang") { clearTimeout(iteme); iteme = setTimeout(function() { //do function閸︺劍顒濇径鍕晸閸楁洖鍤禍瀣╂鐟曚焦澧界悰宀€娈戞禒锝囩垳 if($(".video-bofang").find("i").hasClass("i-bofang")) { meido.play(); $(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting"); } else { meido.pause(); $(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang"); } },100); } else { if(videobox.hasClass("hideui")) { videobox.removeClass("hideui"); } else { videobox.addClass("hideui"); } } }); /* * 閸欏苯鍤崗銊ョ潌 * * */ $(".video-video").on("dblclick", function() { if(IsPC()) { clearTimeout(iteme); if(videobox.hasClass("quanping")) { exitquanping(); } else { quanpin(); } } }); /* * * 姒х姵鐖g粔璇插弳闂呮劘妫孶I * * */ $(".video-ui").on("mouseleave", function() { clearTimeout(iteme); iteme = setTimeout(function() { //do function閸︺劍顒濇径鍕晸閸楁洖鍤禍瀣╂鐟曚焦澧界悰宀€娈戞禒锝囩垳 $(".video-div").addClass("video-hide-ui"); }, 5000); }); $(".video-ui").on("mouseenter", function() { $(".video-div").removeClass("video-hide-ui"); }); /* * * 閸忔娊妫磛ideo * * */ $(".video-close").on("click touchstart", function() { videobox.remove(); }); //鏉╂稑瀹抽弶锟犳桨閺夎法娴夌€佃绁荤憴鍫濇珤閻ㄥ嫬涔忔潏鍦畱鐠烘繄顬 var parent_left = 0; //姒х姵鐖f担宥囩枂閻╃顕ù蹇氼潔閸c劎娈戝锕佺珶閻ㄥ嫯绐涚粋锟 var e_left = 0; /* * 鏉╂稑瀹抽弶锟 */ $(".video-progress", videobox).on("mousemove touchmove", function(e) { var event; if(e.offsetX) { event = e; } else if(e.originalEvent.changedTouches[0].clientX) { event = e.originalEvent.changedTouches[0]; } parent_left = $(this).offset().left; //姒х姵鐖f担宥囩枂閻╃顕ù蹇氼潔閸c劎娈戝锕佺珶閻ㄥ嫯绐涚粋锟 e_left = event.pageX; var width = e_left - parent_left; var wb = (width / $(this).width()); var tt = wb * meido.duration; $(".video-tooltip", $(this)).css({ "left": (wb * 100) + "%" }); $(".video-progress-hover", videobox).css({ "width": (wb * 100) + "%" }); $(".video-text", videobox).html(addzero(parseInt(tt / 60)) + ":" + addzero(parseInt(tt % 60))); }); $(".video-progress", videobox).on("click touchstart touchend", function(e) { videobox.removeClass("video-playing"); var percent = ($(".video-progress-hover", videobox).width() / $(this).width()); console.log(percent); meido.currentTime = (percent * meido.duration); }); /* * 闂婃娊鍣 */ var canMove = false; $(".video-tinytip-tiao", videobox).on("mousedown", function(e) { canMove = true; console.log(canMove); var zi = $(".video-volume-range-current", videobox); if(canMove) { volumeh = 1 - e.offsetY / $(this).height(); console.log(volumeh); zi.css("height", volumeh * 100 + "%") } else { return; } }); $(document).on("mouseup", function(e) { canMove = false; }); var volumeh = 0; $(".video-tinytip-tiao", videobox).on("mousemove ", function(e) { var zi = $(".video-volume-range-current", videobox); var hh = $(".video-volume-range", videobox); if(canMove) { console.log(e); volumeh = 1 - (e.offsetY - 16) / hh.height(); console.log(volumeh); if(volumeh <= 0) { $(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off"); } else if(volumeh > 1) { volumeh = 1; } else { $(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on"); } zi.css("height", volumeh * 100 + "%") meido.volume = volumeh; } else { return; } }); $(".video-btn-volume", videobox).on("click", function() { if($(this).find("i").hasClass("i-voice-on")) { meido.volume = false; volumeh = $(".video-volume-range-current", videobox).height() / $(".video-volume-range", videobox).height(); console.log(volumeh); $(".video-volume-range-current", videobox).css("height", 0 + "%"); $(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off"); } else { meido.volume = true; $(".video-volume-range-current", videobox).css("height", volumeh * 100 + "%"); $(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on"); } }) /* * 闂婃娊鍣 缂佹挸鐔 */ /* * 閸忋劌鐫 */ $(".video-fullscreen", videobox).on("click", function() { if($(this).find("i").hasClass("i-quanping")) { quanpin(meido); } else { console.log("闁偓閸戝搫鍙忕仦锟?); exitquanping(); } }) /* * 閸忋劌鐫嗙紒鎾崇啲 */ /* * 閸掑洦宕插〒鍛珰鎼达拷 */ $(".video-menu-item").on("click",function(){ if($(this).hasClass("video-active")){ return ; } $(this).addClass("video-active").siblings().removeClass("video-active"); $(".video-definition-button span").html($(this).html()); var duration=meido.currentTime; meido.canplay=false; meido.pause(); meido.src=datasrc+$(this).html()+".mp4"; meido.currentTime=duration; }); }); })