1 简单描述
1 <video src=""><video> 用来播放视频的元素标签
2 支持 MP4 WebM Ogg 视频格式
3 <video src=""> 文案 </video>
4 通过 video 对象相关 API 可以实现, 自定义播放控件等功能
2 常用标签属性
1 视频路径:
<video src="./xx/xxx.mp4"> </video>
3 常用属性:
<video src="" controls> </video>
<video src="" muted> </video>
<video src="" autoplay> </video>
<video src="" loop> </video>
4 样式属性:
<video src="" width="600" height="450" > </video>
3 关于 video 对象
1 video对象属性
autoplay 是否自动播放
controls 是否显示播放控件
loop 是否为循环播放
muted 是否为静音
playbackRate 当前播放速度
preload 预加载情况
duration 整个媒体文件的播放时长,以s为单位
currentTime 当前播放时间,以s为单位
paused 如果媒体文件当前被暂停,则返回true
volume 返回当前播放视频的音量
error 错误,正常为null
2 video对象方法
load ( ) 方法用于重新加载src指定的媒体文件
pause ( ) 方法用于暂停正在播放中的媒体文件
play ( ) 方法用于播放媒体文件
3 video对象事件
loadstart----------开始请求数据时触发
progress----------正在请求数据时触发
error--------------请求数据时遇到错误时触发
play---------------开始播放时触发
pause-------------暂停时触发
timeupdate-------播放时间改变时触发
ended-------------播放结束时触发
volumechange--- 音量改变时触发
canplay-----------可以播放时触发(加载了部分视频)
canplaythrough---可以播放时触发(全部加载了视频)
4 video API 的测试
let video = document.querySelector(".video")
let btn = document.querySelector(".btn")
btn.onclick = function() {
console.log(video.autoplay)
}