admin管理员组文章数量:1571132
最终效果:
思路/步骤:
拿到需要操作的元素
通过事件监听视频是否加载完毕
- 隐藏加载的动画
- 显示视频
- 获取视频的总时长
- 格式化获取到的时间
监听播放按钮的点击
- 判断当前是否处于播放/暂停状态
- 切换对应的图标
监听视频播放的进度
- 同步文本时间
- 同步进度条
监听进度条的点击事件
- 获取鼠标当前点击的位置
监听视频是否已经播放完毕
- 恢复播放时间
- 恢复图标
- 恢复时间
- 恢复进度条
- 恢复标记
监听全屏按钮的点击
源码:
* {
margin: 0;
padding: 0;
}
a {
color: #000;
text-decoration: none;
font-size: 25px !important;
}
figure {
width: 800px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
background: #24bbfe url("./../images/loading.gif") no-repeat center center;
}
figcaption {
font-size: 30px;
text-align: center;
}
video {
display: none;
width: 800px;
}
.control {
width: 100%;
height: 50px;
background: rgba(0, 255, 0, .5);
position: absolute;
left: 0;
bottom: 10px;
}
.control>#play {
position: absolute;
left: 40px;
top: 50%;
transform: translateY(-50%);
}
.control>.progress {
width: 60%;
height: 30px;
background: #ccc;
position: absolute;
left: 80px;
top: 50%;
transform: translateY(-50%);
border-radius: 15px;
overflow: hidden;
}
.control>.progress>.line {
width: 0px;
height: 100%;
background: #fff;
}
.control>.time {
position: absolute;
left: 580px;
top: 50%;
transform: translateY(-50%);
}
.control>#full {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
<figure>
<figcaption>视频播放器</figcaption>
<video src="images/cjk.mp4"></video>
<div class="control">
<a href="#" id="play" class="iconfont icon-bofang"></a>
<div class="progress">
<div class="line"></div>
</div>
<div class="time">
<span class="current-time">00:00:00</span> /
<span class="total-time">00:00:00</span>
</div>
<a href="#" id="full" class="iconfont icon-fangda"></a>
</div>
</figure>
window.onload = function() {
//1.拿到需要操作的元素
let oVideo = document.querySelector("video");
let oFigure = document.querySelector("figure");
let oTotalTime = document.querySelector(".total-time");
let oCurrentTime = document.querySelector(".current-time");
let oPlay = document.querySelector("#play");
let oProgress = document.querySelector(".progress");
let oLine = document.querySelector(".line");
let oFull = document.querySelector("#full");
//2.通过事件监听视频是否加载完毕
oVideo.oncanplay = function() {
//2.1隐藏加载的动画
oFigure.style.backgroundImage = "none";
//2.2显示视频
oVideo.style.display = "block";
//2.3获取视频的总时长
// console.log(oVideo.duration);
//2.4格式化获取到的时间
let obj = formartTime(oVideo.duration);
oTotalTime.innerHTML = `${obj.hour}:${obj.minute}:${obj.second}`;
// console.log(obj);
};
//3.监听播放按钮的点击
let flag = false;
oPlay.onclick = function() {
//切换图标
if (flag) {
flag = false;
//正在播放
oPlay.className = "iconfont icon-bofang";
//切换图标
// 暂停播放
oVideo.pause();
} else {
flag = true;
// 没有播放
oPlay.className = "iconfont icon-zanting";
//切换图标
// 播放播放
oVideo.play();
}
};
//4.监听视频播放的进度
oVideo.ontimeupdate = function() {
//4.1同步文本时间
let obj = formartTime(oVideo.currentTime);
oCurrentTime.innerHTML = `${obj.hour}:${obj.minute}:${obj.second}`;
//4.2同步进度条
let res = oVideo.currentTime / oVideo.duration * 100;
oLine.style.width = res + '%';
};
//5.监听进度条的点击事件
oProgress.onclick = function(e) {
e = e || window.e;
//鼠标点击的位置/进度条的宽度=当前播放的时间/总时长
//5.1获取鼠标当前点击的位置
let currentTime = e.offsetX / oProgress.offsetWidth * oVideo.duration;
// console.log(current);
oVideo.currentTime = currentTime;
};
//6.监听视频是否已经播放完毕
oVideo.onended = function() {
//6.0恢复播放时间
oVideo.currentTime = 0;
//6.1恢复图标
oPlay.className = "iconfont icon-bofang";
//6.2恢复时间
oCurrentTime.innerHTML = "00:00:00";
//6.3恢复进度条
oLine.style.width = "0%";
//6.4恢复标记
flag = false;
};
//7.监听全屏按钮的点击
oFull.onclick = function() {
// oVideo.requestFullscreen();
toFullVideo(oVideo);
};
};
//视频全屏兼容性解决
function toFullVideo(videoDom) {
if (videoDom.requestFullscreen) {
return videoDom.requestFullscreen();
} else if (videoDom.webkitRequestFullScreen) {
return videoDom.webkitRequestFullScreen();
} else if (videoDom.mozRequestFullScreen) {
return videoDom.mozRequestFullScreen();
} else {
return videoDom.msRequestFullscreen();
}
}
//格式化时间
function formartTime(time) {
// 1.利用相差的总秒数 / 小时 % 24;
let hour = Math.floor(time / (60 * 60) % 24);
hour = hour >= 10 ? hour : "0" + hour;
// 2.利用相差的总秒数 / 分钟 % 60;
let minute = Math.floor(time / 60 % 60);
minute = minute >= 10 ? minute : "0" + minute;
// 3.利用相差的总秒数 % 秒数
let second = Math.floor(time % 60);
second = second >= 10 ? second : "0" + second;
return {
hour: hour,
minute: minute,
second: second,
}
}
本文标签: 视频播放器JavaScript
版权声明:本文标题:JavaScript实现视频播放器 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725774249a1041748.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论