// 功能:
// 1.视频的播放与暂停(图标变化)
// 2.总时间的显示
// 3.当前时间的显示(进度)
// 4.进度条的显示
// 5.跳跃播放
// 6.全屏
<!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.offsetWidthvideo.currentTime = clickX / width * video.duration;});// 全屏// 获取按钮var fullscreen = document.querySelector(".fullscreen");fullscreen.onclick = function () {// 请求全屏video.webkitRequestFullScreen();}</script>
</body>
</html>
