【前端】【萌狼原创】萌狼播放器--代码(三)-阿里云开发者社区

【前端】【萌狼原创】萌狼播放器--代码(三)
2023-05-29 73
版权
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【前端】【萌狼原创】萌狼播放器--代码
一页汇总（css，js，都在这个html文件里面）

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 字体图标库 --><linkrel="stylesheet"href="https://at.alicdn.com/t/font_3159328_il2viqh3j9p.css"><linkrel="stylesheet"href="./source/css/font-awesome-4.7.0/css/font-awesome.min.css"/><scriptsrc="./source/js/jquery.min.js"></script><linkhref="./source/css/normalize.css"><style>.player {
/* 边距问题 */margin: 0auto;
padding: 0;
box-sizing: border-box;
/* 大小问题 */width: 100%;
height: auto;
/* 字体问题 *//* 颜色问题 */background-color: #FD70A1;
/* 边框问题 *//* border: 1px solid snow; */border-radius: 5px;
/* 其他美化 */box-shadow: 1px1px1px1pxrgb(19, 141, 255, 0.2);
        }
.player.title {
margin: 0.25em;
color: snow;
        }
.player.titlespan {
padding-left: 0.5em;
font-size: 0.8em;
        }
.playera {
text-decoration: none;
color: snow;
        }
.playervideo {
/* 边距问题 */margin: 0auto;
padding: 0;
box-sizing: border-box;
/* 大小问题 */width: 100%;
height: auto;
        }
/* 控制条样式 */.controller {
/* 边距问题 */margin: 0auto;
padding: 0;
box-sizing: border-box;
/* 大小问题 */width: 100%;
/* 边框问题 */border-radius: 5px;
/* 其他美化 */box-shadow: 1px1px1px1pxrgb(19, 141, 255, 0.2);
        }
.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);
        }
.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 {
display: -webkit-inline-flex;
/* Safari */display: inline-flex;
justify-content: space-between;
width: 100%;
        }
/* 控制栏 */.controller.basep,
.controller.morep,
.controller.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;
        }
</style></head><body><!-- 播放器 --><figure><divclass="player"><divclass="title"><spanclass="iconfont icon-shipin"></span><span>萌狼播放器</span><ahref="https://cnblogs.com/mllt"><small>&nbsp;&nbsp;version：0.1</small></a></div><!-- <video src="http://akc4.top/video/videoBg1.mp4"></video> --><divclass="svedio"><!-- 下面元素默认隐藏 --><spanid="tipStop"class="iconfont icon-icon_video noshow"style="font-size:2em"></span><videosrc="./source/video/旋转复制_x264.mp4"></video></div><!-- 控制栏 --><divclass="controller"><!-- 进度条 --><divclass="bar"><divclass="line"></div></div><!-- 功能区 --><divclass="power"><!-- 播放按钮 --><divclass="basep"><spanid="state"class="iconfont icon-bofang1"></span><spanid="restate"class="iconfont icon-zanting1"></span></div><!-- 时间 --><divclass="timer"><spanclass="current">00:00:00</span> —— <spanclass="total">00:00:00</span></div><!-- 功能按钮 --><divclass="morep"><spanid="expand"class="iconfont icon-24gf-fullScreenEnter"></span></div></div></div></div></figure><script>// 获取元素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'); //这个是暂停时在视频中央显示的暂停图标，功能未实现，主要是一个定位问题        });
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()
            }
        })
</script><style>/*隐藏元素*/.noshow {
display: none;
        }
/* 去掉全屏时显示的自带控制条 */video::-webkit-media-controls {
display: none!important;
        }
/* 控制条浮动（全屏时使用） */.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);
        }
</style></body></html>
【前端】【萌狼原创】萌狼播放器--代码(三)

一页汇总（css，js，都在这个html文件里面）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一页汇总（css，js，都在这个html文件里面）

热门文章

最新文章

相关课程

相关电子书

相关实验场景
