controller.css
/* 播放器控制区域的css样式 *//* 注意:请不要随便修改样式名,会影响javascript的执行 *//* 微信公众号/哔哩哔哩:萌狼蓝天 *//* 博客:https://cnblogs.com/mllt */.controller { /* 边距问题 */margin: 0auto; padding: 0; box-sizing: border-box; /* 大小问题 */width: 100%; /* 边框问题 */border-radius: 5px; /* 其他美化 */box-shadow: 1px1px1px1pxrgb(19, 141, 255, 0.2); } /* bar:进度条底 */.controller.bar { /* 大小 */width: 100%; height: 0.5em; /* 背景 *//* background-color: rgb(34, 200, 255, 0.5); */background-color: rgba(255, 255, 255, 0.8); /* 边框问题 */border-radius: 5px; /* 其他美化 */box-shadow: 0px1px1px0pxrgb(19, 141, 255, 0.2); } /* line:进度条动态进度 */.controller.bar.line { /* width: 45%; *//*测试用*/height: 100%; background-color: rgb(34, 200, 255, 1); border-radius: 5px; box-shadow: 1px0px1px0pxrgb(19, 141, 255, 0.2); } /* power:进度条下面的控制按钮集合 */.power { display: inline-flex; /* Safari */display: inline-flex; justify-content: space-between; width: 100%; } /* 控制按钮 *//* basep:控制播放、暂停、重置 */.controller.power.basep, .controller.power.morep, .controller.power.timer { padding: 01em; box-sizing: border-box; height: 1.5em; color: snow; line-height: 1.5em; /* display: table-cell; *//*尽可能的让元素垂直居中*//* display: inline-block; */} .controller.basepspan, .controller.morepspan, .controller.timerspan { display: inline-block; font-size: 1.25em; }
dynamic.css
/* 这里的css样式由JavaScript频繁控制 *//* 注意:请不要随便修改样式名,会影响javascript的执行 *//* 微信公众号/哔哩哔哩:萌狼蓝天 *//* 博客:https://cnblogs.com/mllt *//*隐藏元素*/.noshow { display: none; } /* 控制条浮动(全屏时使用) */.fly { background-color: rgb(34, 200, 255, 0.5); position: absolute; left: 50%; bottom: 0; height: 2.5em; transform: translateX(-50%); } .svedio { position: relative; font-size: 2em; /* color:rgb(19, 141, 255); */color: #FD70A1; } .fly-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 2em; box-shadow: 1px0px1px0pxrgb(19, 141, 255, 0.5); }
video.js
/* 播放器控制区域的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() } })