$(function() { var playvideo = $('video'); var playpause = $('.playpause'); //播放和暂停 var currenttime = $('.timebar .currenttime'); //当前时间 var duration = $('.timebar .duration'); //总时间 var progress = $('.timebar .progress-bar'); //进度条 var volumebar = $('.volumebar .volumewrap').find('.progress-bar'); playvideo[0].volume = 0.4; //初始化音量 playpause.on('click', function() { playcontrol(); }); $('.playcontent').on('click', function() { playcontrol(); }).hover(function() { $('.turnoff').stop().animate({ 'right': 0 }, 500); }, function() { $('.turnoff').stop().animate({ 'right': -40 }, 500); }); $(document).click(function() { $('.volumebar').hide(); }); playvideo.on('loadedmetadata', function() { duration.text(formatseconds(playvideo[0].duration)); }); playvideo.on('timeupdate', function() { currenttime.text(formatseconds(playvideo[0].currenttime)); progress.css('width', 100 * playvideo[0].currenttime / playvideo[0].duration + '%'); }); playvideo.on('ended', function() { $('.playtip').removeclass('glyphicon-pause').addclass('glyphicon-play').fadein(); playpause.toggleclass('playicon'); }); $(window).keyup(function(event){ event = event || window.event; if(event.keycode == 32)playcontrol(); if(event.keycode == 27){ $('.fullscreen').removeclass('canclescreen'); $('#willesplay .playcontroll').css({ 'bottom': -25 }).removeclass('fullcontroll'); }; event.preventdefault(); }); //全屏 $('.fullscreen').on('click', function() { if ($(this).hasclass('canclescreen')) { if (document.exitfullscreen) { document.exitfullscreen(); } else if (document.mozexitfullscreen) { document.mozexitfullscreen(); } else if (document.webkitexitfullscreen) { document.webkitexitfullscreen(); } $(this).removeclass('canclescreen'); $('#willesplay .playcontroll').css({ 'bottom': -48 }).removeclass('fullcontroll'); } else { if (playvideo[0].requestfullscreen) { playvideo[0].requestfullscreen(); } else if (playvideo[0].mozrequestfullscreen) { playvideo[0].mozrequestfullscreen(); } else if (playvideo[0].webkitrequestfullscreen) { playvideo[0].webkitrequestfullscreen(); } else if (playvideo[0].msrequestfullscreen) { playvideo[0].msrequestfullscreen(); } $(this).addclass('canclescreen'); $('#willesplay .playcontroll').css({ 'left': 0, 'bottom': 0 }).addclass('fullcontroll'); } return false; }); //音量 $('.volume').on('click', function(e) { e = e || window.event; $('.volumebar').toggle(); e.stoppropagation(); }); $('.volumebar').on('click mousewheel dommousescroll', function(e) { e = e || window.event; volumecontrol(e); e.stoppropagation(); return false; }); $('.timebar .progress').mousedown(function(e) { e = e || window.event; updatebar(e.pagex); }); //$('.playcontent').on('mousewheel dommousescroll',function(e){ // volumecontrol(e); //}); var updatebar = function(x) { var maxduration = playvideo[0].duration; //video var positions = x - progress.offset().left; //click pos var percentage = 100 * positions / $('.timebar .progress').width(); //check within range if (percentage > 100) { percentage = 100; } if (percentage < 0) { percentage = 0; } //update progress bar and video currenttime progress.css('width', percentage + '%'); playvideo[0].currenttime = maxduration * percentage / 100; }; //音量控制 function volumecontrol(e) { e = e || window.event; var eventype = e.type; var delta = (e.originalevent.wheeldelta && (e.originalevent.wheeldelta > 0 ? 1 : -1)) || (e.originalevent.detail && (e.originalevent.detail > 0 ? -1 : 1)); var positions = 0; var percentage = 0; if (eventype == "click") { positions = volumebar.offset().top - e.pagey; percentage = 100 * (positions + volumebar.height()) / $('.volumebar .volumewrap').height(); } else if (eventype == "mousewheel" || eventype == "dommousescroll") { percentage = 100 * (volumebar.height() + delta) / $('.volumebar .volumewrap').height(); } if (percentage < 0) { percentage = 0; $('.othercontrol .volume').attr('class', 'volume glyphicon glyphicon-volume-off'); } if (percentage > 50) { $('.othercontrol .volume').attr('class', 'volume glyphicon glyphicon-volume-up'); } if (percentage > 0 && percentage <= 50) { $('.othercontrol .volume').attr('class', 'volume glyphicon glyphicon-volume-down'); } if (percentage >= 100) { percentage = 100; } $('.volumewrap .progress-bar').css('height', percentage + '%'); playvideo[0].volume = percentage / 100; e.stoppropagation(); e.preventdefault(); } function playcontrol() { playpause.toggleclass('playicon'); if (playvideo[0].paused) { playvideo[0].play(); $('.playtip').removeclass('glyphicon-play').addclass('glyphicon-pause').fadeout(); } else { playvideo[0].pause(); $('.playtip').removeclass('glyphicon-pause').addclass('glyphicon-play').fadein(); } } //关灯 $('.btnlight').click(function(e) { e = e || window.event; if ($(this).hasclass('on')) { $(this).removeclass('on'); $('body').append('
'); $('.overlay').css({ 'position': 'absolute', 'width': 100 + '%', 'height': $(document).height(), 'background': '#000', 'opacity': 1, 'top': 0, 'left': 0, 'z-index': 999 }); $('.playcontent').css({ 'z-index': 1000 }); $('.playcontroll').css({ 'bottom': -48, 'z-index': 1000 }); $('.playcontent').hover(function() { $('.playcontroll').stop().animate({ 'height': 48, },500); }, function() { settimeout(function() { $('.playcontroll').stop().animate({ 'height': 0, }, 500); }, 2000) }); } else { $(this).addclass('on'); $('.overlay').remove(); $('.playcontroll').css({ 'bottom': 0, }); } e.stoppropagation(); e.preventdefault(); }); }); //秒转时间 function formatseconds(value) { value = parseint(value); var time; if (value > -1) { hour = math.floor(value / 3600); min = math.floor(value / 60) % 60; sec = value % 60; day = parseint(hour / 24); if (day > 0) { hour = hour - 24 * day; time = day + "day " + hour + ":"; } else time = hour + ":"; if (min < 10) { time += "0"; } time += min + ":"; if (sec < 10) { time += "0"; } time += sec; } return time; }