自定义视频播放器

1.本次实例涉及的相关属性介绍

（1）涉及视频的相关属性介绍

volume： 设置或返回音频/视频的音量(规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字,默认值：1.0。)
playbackRate: 设置或返回音频/视频播放的速度(示例：1.0 正常速度,0.5 半速（更慢）,2.0 倍速（更快)
duration: 返回当前音频/视频的长度（以秒计）
currentTime: 设置或返回音频/视频中的当前播放位置（以秒计）

（2）涉及视频的相关事件介绍

canplay: 当浏览器可以播放音频/视频时
ended: 当目前的播放列表已结束时
pause： 当音频/视频已暂停时
play： 当音频/视频已开始或不再暂停时
ratechange： 当音频/视频的播放速度已更改时
timeupdate： 当目前的播放位置已更改时
volumechange： 当音量已更改时

详细的媒体类属性和事件学习请参考：https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

2. 实例如下：

<!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"><link rel="stylesheet" href="//at.alicdn.com/t/c/font_2996480_byv08gmc40d.css" /><link rel="stylesheet" type="text/css" href="./css/index.css" /><title>Document</title>
</head><body><div class="player"><div class="title">视频标题</div><div class="show-ending">播放结束</div><video src="./video/1.mp4" oncanplay=""></video><!-- 操作区域 --><div class="controls-box"><div class="v-play iconfont icon-shipinbofang"></div><div class="progress"><div class="default-line"></div><div class="real-step"></div></div><!-- 音量控制 --><div class="volumn iconfont icon-shengyin_shiti"><div class="line-wrapper"><div class="line"></div><div class="bar"></div></div></div><!-- 速度的控制 --><div class="rate-wrapper iconfont icon-dangwei"><ul class="rate-level-wrapper"><li class="rate-level" id="r-2">2.0倍速</li><li class="rate-level" id="r-1">1.0倍速</li><li class="rate-level" id="r-0.5">0.5倍速</li></ul></div><div class="time-show"><span class="current-time">00:00:00</span> /<span class="total-time">00:00:00</span></div><div class="full-screen iconfont icon-quanping"></div></div></div><script>let video = $('video'),playBtn = $('.v-play'),totalTime = $('.total-time'),currentTime = $('.current-time'),currentBar = $('.real-step'),progress = $('.progress'),showEnding = $('.show-ending'),player = $('.player'),volumn = $('.line-wrapper'),volumnBar = $('.bar'),volumnBox = $('.volumn')rateBox = $('.rate-level-wrapper')function $(name) {return document.querySelector(name)}// 过滤时间function filterTime(data) {if (!data) {return '00:00:00'}data = String(data)let hours = String(Math.floor(data / 3600)),minutes = String(Math.floor(data % 3600 / 60)),seconds = String(Math.floor(data % 3600 % 60))return hours.padStart(2, '0') + ':' + minutes.padStart(2, '0') + ':' + seconds.padStart(2, '0')}   function playVideo(e, hasControls) {if (hasControls) {if (e.target.className.includes('icon-shipinbofang')) {// 播放e.target.className = e.target.className.replace('icon-shipinbofang', 'icon-shipinzanting')// video.pause()} else {// 暂停e.target.className = e.target.className.replace('icon-shipinzanting', 'icon-shipinbofang')video.play()}return}if (e.target.className.includes('icon-shipinbofang')) {// 播放e.target.className = e.target.className.replace('icon-shipinbofang', 'icon-shipinzanting')video.play()} else {// 暂停e.target.className = e.target.className.replace('icon-shipinzanting', 'icon-shipinbofang')video.pause()}}document.addEventListener('click', function (e) {/*****控制视频的播放与暂停****** */if (e.target.className.includes('v-play')) {playVideo(e)return}/*******计算当前进度条对应的时间处理点击进度条进行快进快退的模块*******/if (e.path[0].className.includes('progress') || e.path[1].className.includes('progress')) {// 计算当前时间 e.offsetX / progress.offsetWidth * video.durationvideo.currentTime = e.offsetX / progress.offsetWidth * video.durationplayVideo(e, true)return}/* ******音量模块的代码*******/// 设置视频的音量if (e.path[0].className.includes('line-wrapper') || e.path[1].className.includes('line-wrapper')) {if (video.volume === 0) {volumnBox.className = volumnBox.className.replace('icon-shengyin_shiti', 'icon-jinyin')}if (volumnBox.className.includes('icon-jinyin')) {volumnBox.className = volumnBox.className.replace('icon-jinyin', 'icon-shengyin_shiti')}video.volume = e.offsetY / 100volumnBar.style.height = e.offsetY + 'px'return}if (e.target.className.includes('volumn')) {volumnBar.style.height = video.volume * 100 + 'px'volumn.style.display !== 'block' ? volumn.style.display = 'block' : volumn.style.display = 'none'return}/*******变更视频的播放速率:playbackRate 属性设置或返回音频/视频的当前播放速度只有 Google Chrome 和 Safari 支持 playbackRate 属性。audio|video.playbackRate=playbackspeed注意速率不能设置负值，会报错的*******/if (e.target.className.includes('rate-wrapper')) {rateBox.style.display = 'block'return}if (e.target.className === 'rate-level') {let id = e.target.id.replace('r-', '')video.playbackRate = Number(id)console.log(video.playbackRate, 'video.playbackRate')rateBox.style.display = 'none'return}/** ** ** *处理全屏展示与退出全屏的操作*****/if (e.target.className.includes('full-screen')) {if (e.target.className.includes('icon-quanping')) {// 全屏e.target.className = e.target.className.replace('icon-quanping', 'icon-quxiaoquanping')player.webkitRequestFullScreen()} else {// 退出全屏e.target.className = e.target.className.replace('icon-quxiaoquanping', 'icon-quanping')document.webkitExitFullscreen()}return}})/*****当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时)，能够获取到对应的视频总时长*******/video.oncanplay = function (e) {video.style.display = 'block'console.log('当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时)，能够获取到对应的视频总时长')totalTime.innerText = filterTime(video.duration)}/*******时间每次更新的时候给当前时间模块赋值(ontimeupdate:当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。)*******/video.ontimeupdate = function (e) {if (video.currentTime !== video.duration) {showEnding.style.display = 'none'}currentTime.innerText = filterTime(video.currentTime)// 进度条长度计算：  video.currentTime/ video.duration currentBar.style.width = (video.currentTime / video.duration) * 100 + '%'}/* ******播放结束时需要提示播放结束(onended:当媒介已到达结尾时运行的脚本)*******/video.onended = function (e) {showEnding.style.display = 'block'video.style.display = 'none'playBtn.className = playBtn.className.replace('icon-shipinzanting', 'icon-shipinbofang')}// 每当音量改变时触发onvolumechange事件video.onvolumechange = function (e) {if (video.volume === 0) {volumnBox.className = volumnBox.className.replace('icon-shengyin_shiti', 'icon-jinyin')}}</script>
</body></html>