一般情况下,video的样式可以满足正常的需求了,但是有时候仍然会要求修改video的样式,下面就是记录一下自定义video样式的代码。
它可以实现进度的拖拽,音量的拖拽和静音,双击全屏功能的实现等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义视频播放窗口样式</title>
<link rel="stylesheet" href="video.css">
</head>
<body>
<div id="video-box" class="video-box">
<img id="bigPlay" src="./img/play.png" alt="paly">
<video id="video" poster="./img/video.jpg">
<source
src="https://vdept.bdstatic.com/735177645a6831774c64756570504471/4367794451686962/09049a6b330aa16f02700f37be984c2761664a5c14810054428bd524c739ab477f35273991c20949a3336ba62a621ca7.mp4?auth_key=1585055265-0-0-e724df76927e42022a39674990bb326d"
type="video/ogg">
</source>
</video>
<div id="control">
<div id="play" class="c-icon"></div>
<div id="pause" class="c-icon"></div>
<div id="progress">
<div id="timeBar"></div>
</div>
<div id="time">
<span id="currentTime">00:00</span>
<span>/</span>
<span id="duration">00:00</span>
</div>
<div id="sound" class="c-icon"></div>
<div id="mute" class="c-icon"></div>
<div id="soundBox">
<div id="soundBar"></div>
</div>
<div id="fullScreen" class="c-icon"></div>
</div>
</div>
<script src="./video.js"></script>
</body>
</html>
/* 视频播放窗口 */
.video-box{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
background-color: black;
}
/* 默认视频 */
video{
width: 100%;
}
/* 视频播放控制 */
#control{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
background-color: #1d1d1d;
}
#control div{
cursor: pointer;
}
/* 图标 */
.c-icon{
width: 24px;
height: 24px;
margin: 0 8px;
}
#play{
background: url(./img/play.png) no-repeat;
background-size: 100%;
}
#bigPlay{
cursor: pointer;
position: absolute;
z-index: 999;
width: 20%;
}
#pause{
display: none;
background: url(./img/pause.png) no-repeat;
background-size: 100%;
}
#sound{
background: url(./img/sound.png) no-repeat;
background-size: 100%;
}
#mute{
display: none;
background: url(./img/mute.png) no-repeat;
background-size: 100%;
}
#fullScreen{
width: 18px;
height: 18px;
background: url(./img/fullScreen.png) no-repeat;
background-size: 100%;
}
#time{
margin-left: 8px;
color: white;
}
#progress{
overflow: hidden;
flex-grow: 1;
height: 10px;
border-radius: 5px;
background-color: #333333;
}
#timeBar{
width: 0;
height: 10px;
background-color: tomato;
}
#soundBox{
overflow: hidden;
width: 100px;
height: 10px;
border-radius: 5px;
background-color: #333333;
}
#soundBar{
width: 0;
height: 10px;
background-color: tomato;
}
@media (max-width: 576px) {
#soundBox{
width: 70px;
}
#time{
font-size: 14px;
}
}
@media (max-width: 420px) {
#control{
height: 32px;
}
.c-icon{
width: 18px;
height: 18px;
margin: 0 8px;
}
#fullScreen{
width: 14px;
height: 14px;
}
#time{
font-size: 12px;
}
#soundBox{
width: 50px;
}
}
var v = {
video: document.getElementById("video"), // video 标签
box: document.getElementById("video-box"), // video 容器
// 按钮
play: document.getElementById("play"), // 播放按钮
bigPlay: document.getElementById("bigPlay"), // 中央播放按钮
pause: document.getElementById("pause"), // 暂停按钮
sound: document.getElementById("sound"), // 音量喇叭
mute: document.getElementById("mute"), // 静音
fullScreen: document.getElementById("fullScreen"), // 全屏按钮
// 其他
duration: document.getElementById("duration"), // 总时长
currentTime: document.getElementById("currentTime"), // 当前播放时间
progress: document.getElementById("progress"), // 时间容器
timeBar: document.getElementById("timeBar"), // 时间进度
soundBox: document.getElementById("soundBox"), // 音量容器
soundBar: document.getElementById("soundBar"), // 音量大小
playSpeed: document.getElementById("playSpeed"), // 播放速率
soundPercent: 0, //音量百分比
};
// ====================== 函数封装 ======================
// 显示与隐藏
function toggle (a, b) {
a.style.display = "none";
b.style.display = "block";
}
// 时间格式化
function timer (seconds) {
var minute = Math.floor(seconds / 60);
if (minute < 10) {
minute = "0" + minute;
}
var second = Math.floor(seconds % 60);
if (second < 10) {
second = "0" + second;
}
return minute + ":" + second;
}
// 进度条拖拽
function updateprogress (x) {
var percent = x / v.progress.clientWidth * 100;
if (percent > 100) {
percent = 100;
} else if (percent < 0) {
percent = 0;
}
v.timeBar.style.width = percent + "%";
v.video.currentTime = v.video.duration * percent / 100;
}
// 进度条获取坐标调用 拖拽实现方法
var enableProgressDrag = function (e) {
var progressDrag = false;
v.progress.onmousedown = function (e) {
progressDrag = true;
updateprogress(e.offsetX);
}
document.onmouseup = function (e) {
if (progressDrag) {
progressDrag = false;
updateprogress(e.offsetX);
}
}
v.progress.onmousemove = function (e) {
if (progressDrag) {
updateprogress(e.offsetX);
}
}
};
// 判断是否静音
function isSound () {
if (v.video.volume == 0) {
toggle(v.sound, v.mute)
} else {
toggle(v.mute, v.sound)
}
}
// 切换静音
v.sound.onclick = function () {
toggle(v.sound, v.mute);
v.video.volume = 0;
v.soundBar.style.width = 0;
}
// 去除静音 音量回到之前选定区域
v.mute.onclick = function () {
toggle(v.mute, v.sound);
v.soundBar.style.width = v.soundPercent + "%";
v.video.volume = v.soundPercent / 100;
}
// 音量拖拽
function updatesound (x, n) {
if (n) {
v.soundPercent = n;
} else {
v.soundPercent = x / v.soundBox.clientWidth * 100;
}
if (v.soundPercent > 100) {
v.video.volume = 100;
}
if (v.soundPercent < 0) {
v.video.volume = 0;
}
v.video.volume = v.soundPercent / 100;
v.soundBar.style.width = v.soundPercent + "%";
isSound();
}
// 音量获取坐标调用 拖拽实现方法
var enableSoundDrag = function (e) {
var soundDrag = false;
v.soundBox.onmousedown = function (e) {
soundDrag = true;
updatesound(e.offsetX, null);
}
v.soundBox.onmouseup = function (e) {
if (soundDrag) {
soundDrag = false;
updatesound(e.offsetX, null);
}
}
v.soundBox.onmousemove = function (e) {
if (soundDrag) {
updatesound(e.offsetX, null);
}
}
};
// 全屏
function requestFullscreen (ele) {
// 全屏兼容代码
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
// ====================== 函数封装 ======================
// 视频播放完毕返回未播放状态
v.video.addEventListener('ended', function () {
toggle(v.pause, v.play)
v.timeBar.style.width = 0;
video.src = video.currentSrc
})
// 监测是否处于播放状态,点击暂停
v.video.addEventListener('playing', function () {
v.box.style.cursor = 'pointer'
v.video.addEventListener('click', function () {
if (!v.video.paused || !v.video.ended) {
v.video.pause();
toggle(v.pause, v.play)
v.bigPlay.style.display = 'block'
}
})
})
// 双击全屏
v.video.addEventListener('dblclick', function () {
requestFullscreen(v.video);
})
v.video.addEventListener('pause', function () {
v.box.style.cursor = 'default'
})
v.video.onloadedmetadata = function () {
// 播放
v.play.onclick = function () {
if (v.video.paused || v.video.ended) {
v.video.play();
toggle(v.play, v.pause)
v.bigPlay.style.display = 'none'
}
}
// 中央播放按钮
v.bigPlay.onclick = function () {
if (v.video.paused || v.video.ended) {
v.video.play();
toggle(v.play, v.pause)
v.bigPlay.style.display = 'none'
}
}
// 暂停
v.pause.onclick = function () {
if (!v.video.paused || !v.video.ended) {
v.video.pause();
toggle(v.pause, v.play)
v.bigPlay.style.display = 'block'
}
}
// 获取时长
v.duration.innerHTML = timer(v.video.duration);
v.currentTime.innerHTML = timer(v.video.currentTime);
// 进度条跟随
v.video.ontimeupdate = function () {
var currentTime = v.video.currentTime;
var duration = v.video.duration;
var percent = currentTime / duration * 100;
v.timeBar.style.width = percent + "%";
v.currentTime.innerHTML = timer(currentTime);
}
// 执行时间拖拽和音量拖拽,音量初始化
enableProgressDrag();
enableSoundDrag();
updatesound(null, 20);
// 全屏
v.fullScreen.addEventListener("click", function () {
requestFullscreen(v.video);
})
}