(function ($) { var video = $("#my-video"); var loop = false; var qieh = 1; var videoindex = 0; var videoprop = 0; var ddd = document.getelementbyid('video-div'); var full = false; var timer; var hidding = false; var ison = true; var videolistlen = $('.player-list-video').length; var videospeed = 1; var danid = 0; var clickflag = null; var vedioerror = null; function qiehuan() { video[0].src = videolistall[videoindex]; $('.psvideo-timebar').css('width', 0); video[0].play(); $('.psvideo-play-btn').removeclass('psvideo-stop').addclass('psvideo-play'); $('.psvideo-play-one').hide(); } // 读取初始时间 function timeformat(seconds) { var minite = math.floor(seconds / 60); if (minite < 10) { minite = "0" + minite; } var second = math.floor(seconds % 60); if (second < 10) { second = "0" + second; } return minite + ":" + second; } //更新时间进度条 function updateprogress(x) { if (!full || !hidding) { var progress = $('.psvideo-progress'); var position = x - progress.offset().left; var percentage = 100 * position / progress.width(); if (percentage > 100) { percentage = 100; } if (percentage < 0) { percentage = 0; } $('.psvideo-timebar').css('width', percentage + '%'); video[0].currenttime = video[0].duration * percentage / 100; } } // 拖拽时间进度条 function enableprogressdrag() { if (!full || !hidding) { var progressdrag = false; $('.psvideo-progress').on('mousedown', function (e) { progressdrag = true; updateprogress(e.pagex); }); $(document).on('mouseup', function (e) { if (progressdrag) { progressdrag = false; updateprogress(e.pagex); } }); $(document).on('mousemove', function (e) { if (progressdrag) { updateprogress(e.pagex); } }); } }; // 控制栏展示消失 function showcontrol(shouldshow) { if (shouldshow) { $('.psvideo-shade').removeclass('psvideo-shade-off').addclass('psvideo-shade-on'); $('.player-list').removeclass('player-list-off').addclass('player-list-on'); } else { $('.psvideo-shade').removeclass('psvideo-shade-on').addclass('psvideo-shade-off'); $('.player-list').removeclass('player-list-on').addclass('player-list-off'); } } function fillshow() { if (full) { if (hidding) { hidding = false; } if (timer) { cleartimeout(timer); timer = null; } $('.psvideo-shade').removeclass('psvideo-shade-off').addclass('psvideo-shade-on'); $('.player-list').removeclass('player-list-off').addclass('player-list-on'); video.attr('style', 'cursor:pointer'); if (ison) { timer = settimeout(function () { hidding = true; $('.psvideo-shade').removeclass('psvideo-shade-on').addclass('psvideo-shade-off'); $('.player-list').removeclass('player-list-on').addclass('player-list-off'); video.attr('style', 'cursor:none'); }, 2000) } } } //声音按钮 function soundandmute() { if (!full || !hidding) { if (video[0].muted) { video[0].muted = false; $('#soundbtn').removeclass("jinyin").addclass("sound"); $('.volumebar').css('height', (1 - video[0].volume) * 100 + '%'); $('.sound-number').text(parseint(video[0].volume * 100)); } else { video[0].muted = true; $('#soundbtn').removeclass("sound").addclass("jinyin"); $('.sound-number').text(0); $('.volumebar').css({ "height": "50px", }) } } }; //声音拖拽 function enablesounddrag() { if (!full || !hidding) { var volumedrag = false; $('.volume').on('mousedown', function (e) { volumedrag = true; updatevolume(e.pagey); video[0].muted = false; $('#soundbtn').removeclass("jinyin").addclass("sound"); }); $(document).on('mouseup', function (e) { if (volumedrag) { volumedrag = false; updatevolume(e.pagey); } }); $(document).on('mousemove', function (e) { if (volumedrag) { updatevolume(e.pagey); } }); } }; // 更新声音 function updatevolume(y, vol) { if (!full || !hidding) { var volume = $('.volume'); var soundtop = y - volume.offset().top; var percentage; if (vol) { percentage = 100 - (vol * 100); } else { var position = soundtop; percentage = 100 * position / 50; } if (percentage > 100) { $('#soundbtn').removeclass("sound").addclass("jinyin"); percentage = 100; } else { $('#soundbtn').removeclass("jinyin").addclass("sound"); } if (percentage < 0) { percentage = 0; } percentage = parseint(percentage); $('.sound-number').text(100 - percentage); $('.volumebar').css('height', percentage + '%'); video[0].volume = (100 - percentage) / 100; } }; //开始暂停 $(".off").click(function () { console.log(1); video[0].pause(); outfull() $(".vide_tianchuang").hide(100); }); function playandpause() { if (video[0].paused || video[0].ended) { video[0].play(); $('.psvideo-play-btn').removeclass('psvideo-stop').addclass('psvideo-play'); $('.psvideo-play-one').hide(); playspeed(videospeed); $('.psvideo-dan-all').css('animation-play-state', 'running'); } else { video[0].pause(); $('.psvideo-play-btn').removeclass('psvideo-play').addclass('psvideo-stop'); $('.psvideo-play-one').show(); $('.psvideo-dan-all').css('animation-play-state', 'paused'); } } //播放速度 function playspeed(speed) { if (!full || !hidding) { if (speed == 1) { $('#speed05btn').removeclass("moren"); $('#speed2btn').removeclass("moren"); $('#speed1btn').addclass("moren"); videospeed = 1; } else if (speed == 2) { $('#speed05btn').removeclass("moren"); $('#speed1btn').removeclass("moren"); $('#speed2btn').addclass("moren"); videospeed = 2; } else if (speed == 0.5) { $('#speed1btn').removeclass("moren"); $('#speed2btn').removeclass("moren"); $('#speed05btn').addclass("moren"); videospeed = 0.5; } video[0].playbackrate = speed; } } //循环播放 function isloop() { if (!full || !hidding) { if (!loop) { $('#loop').removeclass('loop').addclass('loop-ture'); video[0].loop = true; loop = !loop; } else { $('#loop').removeclass('loop-ture').addclass('loop'); video[0].loop = false; loop = !loop; } } } function danon() { var dantext = $('.psvideo-dan-input').val(); var zz = "^[ ]+$"; //正则判断是否全是空格 var isk = new regexp(zz); if (dantext && !(isk.test(dantext))) { var danidnow = 'dan' + danid; if (full) { var dandom = ""; } else { var dandom = ""; } $('.psvideo').prepend(dandom); if (danid % 3 == 1) { $('#' + danidnow).css('margin-top', '30px'); } else if (danid % 3 == 2) { $('#' + danidnow).css('margin-top', '60px'); } if (video[0].paused || video[0].ended) { $('.psvideo-dan-all').css('animation-play-state', 'paused'); } else { $('.psvideo-dan-all').css('animation-play-state', 'running'); } $('.psvideo-dan-all').on('animationend', function () { $('#' + this.id).remove(); }); danid += 1; $('#' + danidnow).text(dantext); $('.psvideo-dan-input').val(""); } } function tofull() { $('.psvideo').addclass('full'); video.addclass('full'); $('.vide_tianchuang .container').addclass('full') $('.psvideo-dan').addclass('psvideo-dan-full'); $('.psvideo-dan-input').addclass('psvideo-dan-input-full'); $('.psvideo-shade').addclass('psvideo-shade-full'); timer = settimeout(function () { hidding = true; $('.psvideo-shade').removeclass('psvideo-shade-on').addclass('psvideo-shade-off'); $('.player-list').removeclass('player-list-on').addclass('player-list-off'); video.attr('style', 'cursor:none'); }, 2000) } function outfull() { cleartimeout(timer); video.removeclass('full'); $('.vide_tianchuang .container').removeclass('full') $('.psvideo').removeclass('full'); $('.psvideo-shade').removeclass('psvideo-shade-full'); $('.psvideo-shade').removeclass('psvideo-shade-off').addclass('psvideo-shade-on'); $('.player-list').removeclass('player-list-off').addclass('player-list-on'); video.attr('style', 'cursor:pointer'); $('.psvideo-dan').removeclass('psvideo-dan-full'); $('.psvideo-dan-input').removeclass('psvideo-dan-input-full'); } //全屏 function doonclick() { if (clickflag) { clickflag = cleartimeout(clickflag); } clickflag = settimeout(function () { playandpause(); }, 300); } function doondblclick() { if (clickflag) { clickflag = cleartimeout(clickflag); } launchfullscreen(); } function keytime(key) { if (key == 39) { var keycurrenttime = video[0].currenttime + 10; var keyduration = video[0].duration; var keypercent = 100 * keycurrenttime / keyduration; $('.psvideo-timebar').css('width', keypercent + '%'); $('#currenttime').text(timeformat(keycurrenttime)); video[0].currenttime = keycurrenttime; } if (key == 37) { console.log(video[0].currenttime); var keycurrenttime = video[0].currenttime - 10; console.log(keycurrenttime); var keyduration = video[0].duration; var keypercent = 100 * keycurrenttime / keyduration; $('.psvideo-timebar').css('width', keypercent + '%'); $('#currenttime').text(timeformat(keycurrenttime)); video[0].currenttime = keycurrenttime; } } //全屏 function launchfullscreen() { if (!full || !hidding) { var element = document.documentelement; if (!full) { if (element.requestfullscreen) { element.requestfullscreen(); } else if (element.mozrequestfullscreen) { element.mozrequestfullscreen(); } else if (element.webkitrequestfullscreen) { element.webkitrequestfullscreen(); } else if (element.msrequestfullscreen) { element.msrequestfullscreen(); } } else { if (document.exitfullscreen) { document.exitfullscreen(); } else if (document.msexitfullscreen) { document.msexitfullscreen(); } else if (document.mozcancelfullscreen) { document.mozcancelfullscreen(); } else if (document.webkitcancelfullscreen) { document.webkitcancelfullscreen(); } } } } //监听退出全屏事件 document.addeventlistener("fullscreenchange", function (e) { if (!full) { tofull(); } else { outfull(); } full = !full; }); document.addeventlistener("mozfullscreenchange", function (e) { if (!full) { tofull(); } else { outfull(); } full = !full; }); document.addeventlistener("webkitfullscreenchange", function (e) { if (!full) { tofull(); } else { outfull(); } full = !full; }); document.addeventlistener("msfullscreenchange", function (e) { if (!full) { tofull(); } else { outfull(); } full = !full; }); updatevolume(0, 0.9); // 初始化声音 video.on("loadedmetadata", function () { $('#currenttime').text(timeformat(0)); $('#duration').text(timeformat(video[0].duration)); enableprogressdrag(); enablesounddrag(); playspeed(videospeed); }); video.on('timeupdate', function () { var currenttime = video[0].currenttime; var duration = video[0].duration; var percent = 100 * currenttime / duration; $('.psvideo-timebar').css('width', percent + '%'); $('#currenttime').text(timeformat(currenttime)); }); video.on('canplay', function () { $('.psvideo-loading').fadeout(100); }); video.on('waiting', function () { $('.psvideo-loading').fadein(100); }); video.on('ended', function () { if (!loop) { videoindex += 1; } if (videoindex == videolistlen) { videoindex = 0; } for (var i = 0; i < videolistlen; i++) { $('.player-list-video').eq(i).removeclass('video-now'); } $('.player-list-video').eq(videoindex).addclass('video-now'); qiehuan(); }); $('.psvideo').hover(function () { showcontrol(true); }, function () { showcontrol(false); }); // 判断鼠标是否在控制区,进入和出去改变ison值,来触发是否开启延时函数 $('.psvideo-shade').hover(function () { ison = false; }, function () { ison = true; }); $('.player-list').hover(function () { ison = false; }, function () { ison = true; }); $('body').on('mousemove', function () { fillshow(); }); $('.psvideo-play-one').on('click', function () { playandpause(); }); $('.psvideo-play-btn').on('click', function () { if (!full || !hidding) { playandpause(); } }); $('.all').on('click', launchfullscreen); $('#currenttime').text(timeformat(0)); $('#duration').text(timeformat(video[0].duration)); enableprogressdrag(); enablesounddrag(); playspeed(videospeed); $('#speed1btn').on('click', function () { playspeed(1); }); $('#speed2btn').on('click', function () { playspeed(2); }); $('#speed05btn').on('click', function () { playspeed(0.5); }); // 阻止事件冒泡 $('.sound-list').bind("click", function (event) { event.stoppropagation(); }); $('.konge').bind("click", function (event) { event.stoppropagation(); }); $('#soundbtn').on('click', soundandmute); $('#loop').on('click', isloop); video.on('click', function () { doonclick(); }); video.on('dblclick', function () { doondblclick(); }); $('.psvideo-dan-btn').on('click', function () { danon(); }); $(window).keypress(function (e) { var isfocus = $(".psvideo-dan-input").is(":focus"); var iscontrol = $('.psvideo-shade').hasclass('psvideo-shade-off'); if (e.keycode == 0 || e.keycode == 32) { if (!isfocus || iscontrol) { playandpause(); } } if (e.keycode == 13) { if (isfocus) { danon(); } } }); $(window).keydown(function (e) { keytime(e.keycode); }); $('.player-list-video').on('click', function () { if (!full || !hidding) { videoindex = $(this).index(); for (var i = 0; i < videolistlen; i++) { $('.player-list-video').eq(i).removeclass('video-now'); } $(this).addclass('video-now'); qiehuan(); } }); })(jquery);