一、video的标签属性
属性 | 描述 |
---|
controls | 播放控件,必不可少,不然无法播放 |
autoplay | 自动播放,需要与muted配合使用,初始静音时,才会自动播放 |
src | 路径 |
width | 宽 |
height | 高 |
loop | 循环播放 |
muted | 初始静音 |
poster | 设置视频封面 |
perload | 属性值有none(页面加载后,不加载视频)、auto(加载视频)、metadata(加载视频元数据) |
二、相关API
API | 描述 |
---|
属性 ended | 播放是否结束 |
属性volume | 音量,属性值为0~1 |
属性currentTime | 当前播放时间,以秒计算 |
属性duration | 总时长,以秒计算 |
方法play() | 播放 |
方法pause() | 暂停 |
事件onplay | 播放时执行 |
事件onpause | 暂停时执行 |
事件onended | 结束时执行 |
事件oncanplay | 准备播放时,为执行的第一个 |
事件ontimeupdate | 播放位置发生变化时执行 |
let video = document.querySelector("video")
video.play()
video.ended()
video.ontimeupdate = function () {
console.log(video.currentTime);
}
video.onplay = function () {
console.log("来看我啊");
}
audio和video相同,但是没有width、height、poster、静音播放
补充
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls autoplay loop muted>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>