html5之自定义视频播放器
自定义样式的视频播放器
效果
image
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义视频播放器</title>
<!-- 所有的库一定都在当前页面的css的前面 -->
<link rel="stylesheet" href="./css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="./css/font-awesome.css"> -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="player">
<!-- 视频 -->
<video src="./movie/movie02.mp4" width="100%" height="100%">
<!-- <source src="./movie//movie02.mp4"> -->
</video>
<!-- 控制菜单 -->
<div class="controls">
<!-- 播放按钮 -->
<a href="javascript:;" class="play-btn fa fa-play-circle-o"></a>
<!-- 进度条 -->
<div class="progress">
<div class="progress-bar" style="width: 0%"></div>
</div>
<!-- 播放时间 -->
<div class="time">
<span class="current">00:00:00</span>/
<span class="total">00:00:00</span>
</div>
<!-- 全屏按钮 -->
<a href="javascript:;" class="fullscreen fa fa-expand"></a>
</div>
</div>
<script>
// 功能:
// 1.视频的播放与暂停(图标变化)
// 2.总时间的显示
// 3.当前时间的显示(进度)
// 4.进度条的显示
// 5.跳跃播放
// 6.全屏
// 下面开始实现功能：
// 1.视频的播放与暂停(图标变化)
// 获取视频以及按钮
var video=document.querySelector("video");
var btn=document.querySelector(".play-btn");
btn.addEventListener("click",function(){
// 判断视频状态并改变按钮
if(video.paused){
video.play();
// this.classList.toggle("fa-pause-circle-o");
this.classList.remove("fa-play-circle-o");
this.classList.add("fa-pause-circle-o");
}else{
video.pause();
this.classList.remove("fa-pause-circle-o");
this.classList.add("fa-play-circle-o");
}
});
// 2.总时间的显示
// 获取总时间的按钮
var total=document.querySelector(".total");
video.oncanplay=function(){
var h=Math.floor(video.duration/3600);
var m=Math.floor(video.duration/60-(h*60));
var s=Math.floor(video.duration%60);
h=h<10?'0'+h:h;
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
total.innerHTML=h+':'+m+':'+s;
}
// 获取当前时间
var current=document.querySelector(".current");
// 获取进度条
var progressBar = document.querySelector(".progress-bar");
video.ontimeupdate=function(){
var h=Math.floor(video.currentTime/3600);
var m=Math.floor(video.currentTime/60-(h*60));
var s=Math.floor(video.currentTime%60);
h=h<10?'0'+h:h;
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
current.innerHTML=h+':'+m+':'+s;
// 计算公式 进度条的长度 = 当前时间 / 总时间 * 100 + '%'
progressBar.style.width = video.currentTime / video.duration * 100 + '%';
}
//跳跃播放
// 获取进度条
var progress=document.querySelector(".progress");
progress.addEventListener("click",function(event){
var clickX=event.offsetX;
var width=this.offsetWidth
video.currentTime = clickX / width * video.duration;
});
// 全屏
// 获取按钮
var fullscreen = document.querySelector(".fullscreen");
fullscreen.onclick = function () {
// 请求全屏
video.webkitRequestFullScreen();
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/06/19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录