$(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 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; }); }); })