【前端】【萌狼原创】萌狼播放器--代码(二)

/* 播放器控制区域的css样式 *//* 注意：因为此JavaScript代码直接引用了css样式，故需要在HTML加载完成后才能加载 *//* 微信公众号/哔哩哔哩：萌狼蓝天 *//* 博客：https://cnblogs.com/mllt */window.οnlοad=function () {}
// 获取元素varvideo=$("video").get(0); // 把jQuery 对象转换为 dom对象vartimer=false;
// 当浏览器可以播放视频的时候，就让video显示出来，同时显示出视频的总时长video.oncanplay=function () {
$("video").show();
vartotalTime=formatTime(video.duration);
$(".total").html(totalTime); // 把计算出来的总时长放入页面中的元素中 };
//监听到暂停video.addEventListener('pause', function () {
console.log('[萌狼工作室]视频被暂停啦~')
$('#state').addClass("icon-bofang1").removeClass("icon-weibiaoti--"); // 切换图标//  $('#tipStop').addClass('fly-center').removeClass('noshow'); //这个是暂停时在视频中央显示的暂停图标，功能未实现，主要是一个定位问题$('#tipStop').removeClass('noshow');
    });
//监听到播放video.addEventListener('playing', function () {
console.log('[萌狼工作室]视频开始啦~')
console.log('监听到了播放'+$('#state').hasClass('icon-weibiaoti--'))
$('#state').addClass("icon-weibiaoti--").removeClass("icon-bofang1"); // 切换图标$('#tipStop').addClass('noshow');
 });
//播放按钮$("#state").on("click", function () {
if (video.paused) {
video.play(); // 播放     } else {
video.pause(); // 暂停     }
 });
//手动重置$("#restate").on("click", function () {
video.pause(); //暂停视频$(".line").css("width", 0); //播放进度条归零video.currentTime=0; //将视频播放时间归零$(".current").html(formatTime(video.currentTime)); //动态显示的播放时间归零$('#state').addClass("icon-bofang1").removeClass("icon-weibiaoti--"); // 切换图标 });
// 计算时分秒函数formatTimefunctionformatTime(time) {
varh=Math.floor(time/3600);
varm=Math.floor(time%3600/60);
vars=Math.floor(time%60);
// 00:00:00return (h<10?"0"+h : h) +":"+ (m<10?"0"+m : m) +":"+ (s<10?"0"+s : s);
 };
//显示进度条video.ontimeupdate=function () {
varw=video.currentTime/video.duration*100+"%";
$(".line").css("width", w);
$(".current").html(formatTime(video.currentTime));
 };
//全屏和取消全屏$("#expand").on("click", function () {
//确定参与全屏的内容vardiv=document.querySelector('.player');
// 判断是要全屏还是要退出全屏if (!document.webkitIsFullScreen) {
if (div.requestFullscreen) {
div.requestFullscreen(); // 正常浏览器          } elseif (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen(); // webkit          } elseif (div.mozRequestFullScreen) {
div.mozRequestFullScreen(); //早期火狐浏览器         } elseif (div.oRequestFullScreen) {
div.oRequestFullScreen(); //早期Opera浏览器         } elseif (div.msRequestFullscreen) {
div.msRequestFullscreen(); //早期IE浏览器         } else {
alert('暂不支持在您的浏览器中全屏');
         }
//H5 API END     } else {
if (document.exitFullscreen) {
document.exitFullscreen(); // 正常浏览器          } elseif (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen(); // webkit          } elseif (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); //早期火狐浏览器         } elseif (document.oCancelFullScreen) {
document.oCancelFullScreen(); //早期Opera浏览器         } elseif (document.msCancelFullscreen) {
document.msCancelFullscreen(); //早期IE浏览器         } else {
alert('暂不支持在您的浏览器中全屏');
         }
//H5 API END     }
 });
//监听全屏状态避免Bug//当遇没有通过到特殊操作自动退出全屏时，控制栏因为没有触发，会导致样式异常document.addEventListener('fullscreenchange', function () {
if (document.webkitIsFullScreen) {
console.log('[萌狼工作室]进入全屏，沉浸体验');
//进入全屏后的样式$('.title').addClass("noshow");
$(".controller").addClass("fly");
$("#expand").addClass("icon-24gl-fullScreenEnter").removeClass("icon-24gf-fullScreenEnter");
//创建定时器//定时器，检测是否长时间未操作页面timer=setInterval(function () {
currentTime=newDate().getTime(); //更新当前时间if (currentTime-lastTime>3000) { //判断是否超时if (!$('.controller').hasClass('noshow')) {
$('.controller').addClass("noshow");
console.log('切换型监听触发控制栏隐藏');
                 }
console.log(timer)
             }
         }, 1000);
     } else {
console.log('[萌狼工作室]退出全屏，偷偷看~')
//清除定时器if (timer!=0) {
clearInterval(timer)
console.log('理论上清除了时钟。'+timer)
         }
//退出全屏后的样式if ($('.title').hasClass("noshow")) {
// console.log("[萌狼播放器]FE1：退出全屏，恢复样式");$('.title').removeClass("noshow");
         }
if ($('.controller').hasClass("fly")) {
// console.log("[萌狼播放器]FE2：退出全屏，恢复样式");$(".controller").removeClass("fly");
         }
if ($('.controller').hasClass("noshow")) {
// console.log("[萌狼播放器]FE2：退出全屏，恢复样式");$(".controller").removeClass("noshow");
         }
if ($("#expand").hasClass("icon-24gl-fullScreenEnter")) {
// console.log("[萌狼播放器]FE3：退出全屏，清除样式");$("#expand").addClass("icon-24gf-fullScreenEnter").removeClass("icon-24gl-fullScreenEnter");
         }
     }
 })
//监听鼠标状态varlastTime=newDate().getTime(); //鼠标最后一次移动时间varcurrentTime=newDate().getTime(); //当前时间document.addEventListener('mousemove', function () {
// console.log('[萌狼播放器]鼠标移动，全屏状态为：'+document.webkitIsFullScreen)//要处于全屏状态才会触发事件if (document.webkitIsFullScreen) {
//此时鼠标移动，显示控件// console.log('[萌狼播放器]鼠标移动且处于全屏状态，显示控件')$('.controller').removeClass("noshow");
//更新操作时间lastTime=newDate().getTime(); //更新操作时间       }
 });
//重置播放状态video.onended=function () {
// 当前的视频时长清零 video.currentTime=0;
$("#state").addClass("icon-bofang1").removeClass("icon-weibiaoti--");
 };
//单击进度条视频跳转$(".bar").on("click", function (event) {
if (!video.paused) {
video.pause();
     }
// 1. 获取单击的位置varoffset=event.offsetX;
// 2. 根据单击视频的播放位置计算要切换的时间varcurrent=offset/$('.bar').width() *video.duration; //duration 持续时间// 3. 把计算后的时间赋值给currentTimevideo.currentTime=current;
console.log('[萌狼播放器]跳转到：'+Math.round(video.currentTime) +"秒")
//更新进度条varw=video.currentTime/video.duration*100+"%";
$(".line").css("width", w);
$(".current").html(formatTime(video.currentTime));
console.log('[萌狼播放器]进度条更新完毕，准备播放');
letplayPromise=video.play()
if (playPromise!==undefined) {
playPromise.then(() => {
video.play()
$('#state').addClass("icon-weibiaoti--").removeClass("icon-bofang1"); // 切换图标console.log('[萌狼播放器]已启动播放，开始观看吧！');
         }).catch((e) => {
console.log("[萌狼播放器]#出现错误#："+e);
console.log("[萌狼播放器]#错误分析#也许视频格式不太支持噢，请尝试转码（可以使用小丸工具箱）");
//重置video.currentTime=0;
$("#state").addClass("icon-bofang1").removeClass("icon-weibiaoti--");
         })
     }
 });
//视频被点击$("video").on("click", function () {
// console.log("视频被点击")if (video.paused) {
//播放视频video.play()
$('#tipStop').addClass('noshow');
     } else {
//暂停视频video.pause()
     }
 });
$("#tipStop").on("click", function () {
// console.log("视频被点击")if (video.paused) {
//播放视频video.play()
$('#tipStop').addClass('noshow');
     } else {
//暂停视频video.pause()
     }
 })