HTML | DOM 视频播放属性

HTML 中的视频播放可以通过 video 标签来实现，同时 DOM 中提供了多个有用的属性来控制视频播放。

video 标签

video 标签是 HTML5 中专门用于播放视频的标签，其基本格式如下：

<video src="video.mp4"></video>

其中，src 属性指定视频文件的 URL，视频可以是 MP4、WebM 或 Ogg 格式的。

video 标签同样支持 autoplay、loop、controls、poster 属性，分别表示自动播放、循环播放、控制条和预览图。

DOM 中的属性

video 标签是通过 DOM 来进行控制的，DOM 中有多个属性可以控制视频的播放。

currentTime 属性

currentTime 属性返回或设置视频的当前播放时间，单位为秒。可以通过以下方式来获取或设置：

// 获取当前播放时间
const time = video.currentTime;

// 设置当前播放时间为 10 秒
video.currentTime = 10;

duration 属性

duration 属性返回视频的总时长，单位为秒：

const duration = video.duration;

paused 属性

paused 属性返回视频是否处于暂停状态：

const isPaused = video.paused;

volume 属性

volume 属性表示视频的音量大小，范围为 0.0 到 1.0：

// 获取当前音量大小
const volume = video.volume;

// 设置音量为一半
video.volume = 0.5;

playbackRate 属性

playbackRate 属性表示视频的播放速度，默认为 1.0。可以通过以下方式来获取或设置：

// 获取当前播放速度
const speed = video.playbackRate;

// 设置播放速度为两倍
video.playbackRate = 2.0;

muted 属性

muted 属性表示视频是否静音：

// 判断视频是否静音
const isMuted = video.muted;

// 开启静音
video.muted = true;

defaultMuted 属性

defaultMuted 属性表示视频是否默认静音：

// 判断视频是否默认静音
const isDefaultMuted = video.defaultMuted;

还有其他一些属性和方法，如 ended 属性、play() 方法、pause() 方法等，都可以在 DOM 中进行操作，详情可以参考 MDN 文档。