【前端】【萌狼原创】萌狼播放器--代码
通过对H5 Video标签自定义后得到的H5 Video播放器
简介
名称与原理
作品名称：萌狼播放器
原理：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>
版 权 声 明
