volume: 设置或返回音频/视频的音量(规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字,默认值:1.0。)
playbackRate: 设置或返回音频/视频播放的速度(示例:1.0 正常速度,0.5 半速(更慢),2.0 倍速(更快)
duration: 返回当前音频/视频的长度(以秒计)
currentTime: 设置或返回音频/视频中的当前播放位置(以秒计)
canplay: 当浏览器可以播放音频/视频时
ended: 当目前的播放列表已结束时
pause: 当音频/视频已暂停时
play: 当音频/视频已开始或不再暂停时
ratechange: 当音频/视频的播放速度已更改时
timeupdate: 当目前的播放位置已更改时
volumechange: 当音量已更改时
详细的媒体类属性和事件学习请参考:https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
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>Documenttitle>
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:00span> /
<span class="total-time">00:00:00span>
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.duration
video.currentTime = e.offsetX / progress.offsetWidth * video.duration
playVideo(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 / 100
volumnBar.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>
实例运行图: