audio和video常用属性及事件

一、video的标签属性属性描述controls播放控件，必不可少，不然无法播放autoplay自动播放，需要与muted配合使用，初始静音时，才会自动播放src路径width宽height高loop循环播放muted初始静音poster设置视频封面perload属性值有none(页面加载后，不加载视频)、auto(加载视频)、metadata(加载视频元数据)二、相关APIAPI描述属性 e

顾九七

1302人浏览 · 2021-01-03 20:51:15

顾九七 · 2021-01-03 20:51:15 发布

一、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>
    <!-- 写在video标签中的内容在浏览器不支持的情况下，就使用source中的内容，可写多个，在多个的情况下，以第一个为准-->
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
    </video>