插入标签
从 HTML5 开始引入了 <video>
和 <audio>
两个标签在网页中插入视频音频。JS 同样可以操控多媒体的播放。这里主要提到视频:
<!-- controls 标志性属性主要用于让视频出现控制面板-->
<video src="..." controls></video>
属性和方法
大部分属性取值都为 boolean
- controls:显示控制面板
- autoplay:自动播放,现在的浏览器只允许在静音模式下自动播放
- loop:循环播放
- muted: 静音
- autobuffer:自动缓冲
- volume:设置音量,取值 0-1
poster:设置视频的封面,没有播放时可以显示一张图。音频没有该属性
<video src="..." controls poster="XX.jpg"></video>
duration:查看该多媒体的总时长,单位为秒
currentTime:获取多媒体当前所播放的具体时间,单位为秒
video.currentTime += 10; // 控制视频播放快进 10 s
playbackRate:设置播放倍速,1 为正常速度播放
video.playbackRate = 4; // 4 倍速度播放
事件
- play():播放多媒体
- pause(): [pɔːz] 暂停
- volumechange():调整多媒体音量
- requestFullscreen():全屏
一个最简单的视频播放、暂停功能
<video src="..." controls id='video'></video>
<!-- 功能操作区域 -->
<div id='btnGroup'>
<input type="button" value='播放' id='playBtn'>
<input type="button" value='暂停' id='pauseBtn'>
</div>
<script>
btnGroup.onclick = function (event) {
switch (event.target.id) {
// 播放按钮
case 'playBtn':
video.play();
break;
// 暂停按钮
case 'pauseBtn':
video.pause();
break;
}
}
</script>
获取时长
想要获取到视频总时长或当前播放时长,通过 video.ontimeupdate
事件配合 currentTime
和 duration
属性
// video 是视频多媒体元素元素节点
video.ontimeupdate = function () {
let currentTime = parseInt(video.currentTime);// 获取当前时间
let duration = parseInt(video.duration); // 获取视频总时长
}
更多:多媒体所有属性方法