$(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(); } } }); /* * * 鼠标移入隐藏UI * * */ $(".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"); }); /* * * 关闭video * * */ $(".video-close").on("click", 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; }); }); })