简介
名称与原理
作品名称：萌狼播放器
原理：H5 Video 自定义化
已实现功能
（1）播放暂停按钮、重置播放按钮
（2）点击屏幕可控制暂停、播放
（3）实现可全屏，全屏后，若鼠标一定时间未移动，则隐藏控制栏；鼠标移动，则显示控制栏
（4）可以通过直接点击进度条跳转进度
未完成功能
（1）音量控制
（2）倍速控制
（3）弹幕
缺点
对部分视频格式/编码格式不支持，这是Video标签的锅，与我萌狼蓝天无关
项目目录
index.html --| xrilang-video-css ----| controller.css ----| dynamic.css ----| player.css --| xirlang-video-javascript ----| video.js
代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 字体图标库 --> <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159328_il2viqh3j9p.css"> <script src="./source/js/jquery.min.js"></script> <link href="./source/css/normalize.css"> <!-- 自定义css --> <link rel="stylesheet" href="./xrilang-video-css/player.css"> <link rel="stylesheet" href="./xrilang-video-css/controller.css"> <link rel="stylesheet" href="./xrilang-video-css/dynamic.css"> </head> <body> <!-- 播放器 --> <figure> <div class="player"> <div class="title"><span class="iconfont icon-shipin"></span><span>萌狼播放器</span><a href="https://cnblogs.com/mllt"><small> version：0.1</small></a></div> <!-- <video src="http://akc4.top/video/videoBg1.mp4"></video> --> <div class="svedio"> <!-- 下面元素默认隐藏 --> <span id="tipStop" class="iconfont icon-icon_video noshow fly-center" style="font-size:2em"></span> <video src="./source/video/旋转复制_x264.mp4"></video> </div> <!-- 控制栏 --> <div class="controller"> <!-- 进度条 --> <div class="bar"> <div class="line"></div> </div> <!-- 功能区 --> <div class="power"> <!-- 播放按钮 --> <div class="basep"> <span id="state" class="iconfont icon-bofang1"></span> <span id="restate" class="iconfont icon-zanting1"></span> </div> <!-- 时间 --> <div class="timer"> <span class="current">00:00:00</span> —— <span class="total">00:00:00</span> </div> <!-- 功能按钮 --> <div class="morep"> <span id="expand" class="iconfont icon-24gf-fullScreenEnter"></span> </div> </div> </div> </div> </figure> </body> <!-- 自定义javascript --> <script src="./xrilang-video-javasript/video.js"></script> </html>
player.css
/* 播放器的css样式 */ /* 注意：请不要随便修改样式名，会影响javascript的执行 */ /* 微信公众号/哔哩哔哩：萌狼蓝天 */ /* 博客：https://cnblogs.com/mllt */ .player { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; height: auto; /* 字体问题 */ /* 颜色问题 */ background-color: #FD70A1; /* 边框问题 */ /* border: 1px solid snow; */ border-radius: 5px; /* 其他美化 */ box-shadow: 1px 1px 1px 1px rgb(19, 141, 255, 0.2); } .player .title { margin: 0.25em; color: snow; } .player .title span { padding-left: 0.5em; font-size: 0.8em; } .player a { text-decoration: none; color: snow; } .player video { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; height: auto; } /* 去掉全屏时显示的自带控制条 */ video::-webkit-media-controls { display: none !important; }
controller.css
/* 播放器控制区域的css样式 */ /* 注意：请不要随便修改样式名，会影响javascript的执行 */ /* 微信公众号/哔哩哔哩：萌狼蓝天 */ /* 博客：https://cnblogs.com/mllt */ .controller { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; /* 边框问题 */ border-radius: 5px; /* 其他美化 */ box-shadow: 1px 1px 1px 1px rgb(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: 0px 1px 1px 0px rgb(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: 1px 0px 1px 0px rgb(19, 141, 255, 0.2); } /* power：进度条下面的控制按钮集合 */ .power { display: -webkit-inline-flex; /* Safari */ display: inline-flex; justify-content: space-between; width: 100%; } /* 控制按钮 */ /* basep：控制播放、暂停、重置 */ .controller .power .basep, .controller .power .morep, .controller .power .timer { padding: 0 1em; box-sizing: border-box; height: 1.5em; color: snow; line-height: 1.5em; /* display: table-cell; */ /*尽可能的让元素垂直居中*/ /* display: inline-block; */ } .controller .basep span, .controller .morep span, .controller .timer span { 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: 1px 0px 1px 0px rgb(19, 141, 255, 0.5); }
video.js
/* 播放器控制区域的css样式 */ /* 注意：因为此JavaScript代码直接引用了css样式，故需要在HTML加载完成后才能加载 */ /* 微信公众号/哔哩哔哩：萌狼蓝天 */ /* 博客：https://cnblogs.com/mllt */ window.οnlοad = function () {} // 获取元素 var video = $("video").get(0); // 把jQuery 对象转换为 dom对象 var timer = false; // 当浏览器可以播放视频的时候，就让video显示出来，同时显示出视频的总时长 video.oncanplay = function () { $("video").show(); var totalTime = 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--"); // 切换图标 }); // 计算时分秒函数formatTime function formatTime(time) { var h = Math.floor(time / 3600); var m = Math.floor(time % 3600 / 60); var s = Math.floor(time % 60); // 00:00:00 return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); }; //显示进度条 video.ontimeupdate = function () { var w = video.currentTime / video.duration * 100 + "%"; $(".line").css("width", w); $(".current").html(formatTime(video.currentTime)); }; //全屏和取消全屏 $("#expand").on("click", function () { //确定参与全屏的内容 var div = document.querySelector('.player'); // 判断是要全屏还是要退出全屏 if (!document.webkitIsFullScreen) { if (div.requestFullscreen) { div.requestFullscreen(); // 正常浏览器 } else if (div.webkitRequestFullScreen) { div.webkitRequestFullScreen(); // webkit } else if (div.mozRequestFullScreen) { div.mozRequestFullScreen(); //早期火狐浏览器 } else if (div.oRequestFullScreen) { div.oRequestFullScreen(); //早期Opera浏览器 } else if (div.msRequestFullscreen) { div.msRequestFullscreen(); //早期IE浏览器 } else { alert('暂不支持在您的浏览器中全屏'); } //H5 API END } else { if (document.exitFullscreen) { document.exitFullscreen(); // 正常浏览器 } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); // webkit } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); //早期火狐浏览器 } else if (document.oCancelFullScreen) { document.oCancelFullScreen(); //早期Opera浏览器 } else if (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 = new Date().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"); } } }) //监听鼠标状态 var lastTime = new Date().getTime(); //鼠标最后一次移动时间 var currentTime = new Date().getTime(); //当前时间 document.addEventListener('mousemove', function () { // console.log('[萌狼播放器]鼠标移动，全屏状态为：'+document.webkitIsFullScreen) //要处于全屏状态才会触发事件 if (document.webkitIsFullScreen) { //此时鼠标移动，显示控件 // console.log('[萌狼播放器]鼠标移动且处于全屏状态，显示控件') $('.controller').removeClass("noshow"); //更新操作时间 lastTime = new Date().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. 获取单击的位置 var offset = event.offsetX; // 2. 根据单击视频的播放位置计算要切换的时间 var current = offset / $('.bar').width() * video.duration; //duration 持续时间 // 3. 把计算后的时间赋值给currentTime video.currentTime = current; console.log('[萌狼播放器]跳转到：' + Math.round(video.currentTime) + "秒") //更新进度条 var w = video.currentTime / video.duration * 100 + "%"; $(".line").css("width", w); $(".current").html(formatTime(video.currentTime)); console.log('[萌狼播放器]进度条更新完毕，准备播放'); let playPromise = 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() } })
一页汇总（css，js，都在这个html文件里面）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 字体图标库 --> <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159328_il2viqh3j9p.css"> <link rel="stylesheet" href="./source/css/font-awesome-4.7.0/css/font-awesome.min.css" /> <script src="./source/js/jquery.min.js"></script> <link href="./source/css/normalize.css"> <style> .player { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; height: auto; /* 字体问题 */ /* 颜色问题 */ background-color: #FD70A1; /* 边框问题 */ /* border: 1px solid snow; */ border-radius: 5px; /* 其他美化 */ box-shadow: 1px 1px 1px 1px rgb(19, 141, 255, 0.2); } .player .title { margin: 0.25em; color: snow; } .player .title span { padding-left: 0.5em; font-size: 0.8em; } .player a { text-decoration: none; color: snow; } .player video { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; height: auto; } /* 控制条样式 */ .controller { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; /* 边框问题 */ border-radius: 5px; /* 其他美化 */ box-shadow: 1px 1px 1px 1px rgb(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: 0px 1px 1px 0px rgb(19, 141, 255, 0.2); } .controller .bar .line { /* width: 45%; */ /*测试用*/ height: 100%; background-color: rgb(34, 200, 255, 1); border-radius: 5px; box-shadow: 1px 0px 1px 0px rgb(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: 0 1em; box-sizing: border-box; height: 1.5em; color: snow; line-height: 1.5em; /* display: table-cell; */ /*尽可能的让元素垂直居中*/ /* display: inline-block; */ } .controller .basep span, .controller .morep span, .controller .timer span { display: inline-block; font-size: 1.25em; } </style> </head> <body> <!-- 播放器 --> <figure> <div class="player"> <div class="title"><span class="iconfont icon-shipin"></span><span>萌狼播放器</span><a href="https://cnblogs.com/mllt"><small> version：0.1</small></a></div> <!-- <video src="http://akc4.top/video/videoBg1.mp4"></video> --> <div class="svedio"> <!-- 下面元素默认隐藏 --> <span id="tipStop" class="iconfont icon-icon_video noshow" style="font-size:2em"></span> <video src="./source/video/旋转复制_x264.mp4"></video> </div> <!-- 控制栏 --> <div class="controller"> <!-- 进度条 --> <div class="bar"> <div class="line"></div> </div> <!-- 功能区 --> <div class="power"> <!-- 播放按钮 --> <div class="basep"> <span id="state" class="iconfont icon-bofang1"></span> <span id="restate" class="iconfont icon-zanting1"></span> </div> <!-- 时间 --> <div class="timer"> <span class="current">00:00:00</span> —— <span class="total">00:00:00</span> </div> <!-- 功能按钮 --> <div class="morep"> <span id="expand" class="iconfont icon-24gf-fullScreenEnter"></span> </div> </div> </div> </div> </figure> <script> // 获取元素 var video = $("video").get(0); // 把jQuery 对象转换为 dom对象 var timer = false; // 当浏览器可以播放视频的时候，就让video显示出来，同时显示出视频的总时长 video.oncanplay = function () { $("video").show(); var totalTime = 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--"); // 切换图标 }); // 计算时分秒函数formatTime function formatTime(time) { var h = Math.floor(time / 3600); var m = Math.floor(time % 3600 / 60); var s = Math.floor(time % 60); // 00:00:00 return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); }; //显示进度条 video.ontimeupdate = function () { var w = video.currentTime / video.duration * 100 + "%"; $(".line").css("width", w); $(".current").html(formatTime(video.currentTime)); }; //全屏和取消全屏 $("#expand").on("click", function () { //确定参与全屏的内容 var div = document.querySelector('.player'); // 判断是要全屏还是要退出全屏 if (!document.webkitIsFullScreen) { if (div.requestFullscreen) { div.requestFullscreen(); // 正常浏览器 } else if (div.webkitRequestFullScreen) { div.webkitRequestFullScreen(); // webkit } else if (div.mozRequestFullScreen) { div.mozRequestFullScreen(); //早期火狐浏览器 } else if (div.oRequestFullScreen) { div.oRequestFullScreen(); //早期Opera浏览器 } else if (div.msRequestFullscreen) { div.msRequestFullscreen(); //早期IE浏览器 } else { alert('暂不支持在您的浏览器中全屏'); } //H5 API END } else { if (document.exitFullscreen) { document.exitFullscreen(); // 正常浏览器 } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); // webkit } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); //早期火狐浏览器 } else if (document.oCancelFullScreen) { document.oCancelFullScreen(); //早期Opera浏览器 } else if (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 = new Date().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"); } } }) //监听鼠标状态 var lastTime = new Date().getTime(); //鼠标最后一次移动时间 var currentTime = new Date().getTime(); //当前时间 document.addEventListener('mousemove', function () { // console.log('[萌狼播放器]鼠标移动，全屏状态为：'+document.webkitIsFullScreen) //要处于全屏状态才会触发事件 if (document.webkitIsFullScreen) { //此时鼠标移动，显示控件 // console.log('[萌狼播放器]鼠标移动且处于全屏状态，显示控件') $('.controller').removeClass("noshow"); //更新操作时间 lastTime = new Date().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. 获取单击的位置 var offset = event.offsetX; // 2. 根据单击视频的播放位置计算要切换的时间 var current = offset / $('.bar').width() * video.duration; //duration 持续时间 // 3. 把计算后的时间赋值给currentTime video.currentTime = current; console.log('[萌狼播放器]跳转到：' + Math.round(video.currentTime) + "秒") //更新进度条 var w = video.currentTime / video.duration * 100 + "%"; $(".line").css("width", w); $(".current").html(formatTime(video.currentTime)); console.log('[萌狼播放器]进度条更新完毕，准备播放'); let playPromise = 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: 1px 0px 1px 0px rgb(19, 141, 255, 0.5); } </style> </body> </html>
