$(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鍦ㄦ澶勫啓鍗曞嚮浜嬩欢瑕佹墽琛岀殑浠g爜 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(); } } }); /* * * 榧犳爣绉诲叆闅愯棌ui * * */ $(".video-ui").on("mouseleave", function() { cleartimeout(iteme); iteme = settimeout(function() { //do function鍦ㄦ澶勫啓鍗曞嚮浜嬩欢瑕佹墽琛岀殑浠g爜 $(".video-div").addclass("video-hide-ui"); }, 5000); }); $(".video-ui").on("mouseenter", function() { $(".video-div").removeclass("video-hide-ui"); }); /* * * 鍏抽棴video * * */ $(".video-close").on("click touchstart", function() { videobox.remove(); }); //杩涘害鏉¢潰鏉跨浉瀵规祻瑙堝櫒鐨勫乏杈圭殑璺濈 var parent_left = 0; //榧犳爣浣嶇疆鐩稿娴忚鍣ㄧ殑宸﹁竟鐨勮窛绂� 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; //榧犳爣浣嶇疆鐩稿娴忚鍣ㄧ殑宸﹁竟鐨勮窛绂� 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; }); }); })