HTML | DOM 视频媒体组属性

HTML是一种标记语言，用来设计网页。它的全称是超文本标记语言(HyperText Markup Language)。在HTML中，可以使用标签来描述网页的结构，而视频媒体组属性则可以实现视频的嵌入和播放。

视频媒体组属性

video是用来嵌入视频的HTML标签。与常用的img标签同样具有src属性，可设置视频的路径。

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

HTML5新增的视频媒体组属性增强了HTML对于音视频多媒体的处理。

以下是video标签和相关属性：

属性

• autoplay：可设置视频是否自动播放；
• controls：可设置视频是否有浏览器默认的控制条；
• loop：可设置视频是否循环播放；
• muted：可设置视频是否默认静音；
• preload：可设置视频加载的方式，有三个可选项none, metadata, auto；
• width：可设置视频的宽度；
• height：可设置视频的高度；
• poster：可设置视频未播放时的将要显示的海报图。

例如，以下视频将不会自动播放，拥有默认的控制条，具有300像素的宽度和200像素的高度。

<video src="movie.mp4" controls width="300" height="200"></video>

以下视频将自动播放、静音、无默认控制条、并循环播放。

<video src="movie.mp4" autoplay loop muted controls="false"></video>

事件

video对象提供了多个事件，我们可以用JavaScript来控制视频的播放和暂停功能。以下是事件：

• onabort：当视频的加载被中止时触发
• oncanplay：当视频可以播放时触发；
• ondurationchange：当视频的播放长度发生变化时触发；
• onended：当视频播放结束时触发；
• onerror：当视频加载错误时触发；
• onloadeddata：当视频预加载数据完成时触发；
• onloadedmetadata：当视频的元数据加载完毕时触发；
• onpause：当视频暂停时触发；
• onplay：当视频开始播放时触发；
• onprogress：视频加载过程中连续触发；
• onratechange：当视频播放速率发生变化时触发；
• onseeked：当视频定位时(例如快进/快退)触发；
• onseeking：当视频正在定位时触发；
• onstalled：当浏览器尝试获取媒体数据，但数据不可用时触发；
• onsuspend：当媒体数据完全加载，但考虑到整个媒体文件被播放之外的事情(例如缓冲)时暂停时触发；
• ontimeupdate：当视频播放位置发生变化时连续触发；
• onvolumechange：当视频音量发生变化时触发；
• onwaiting：当视频需要缓冲下一帧但数据不可用时触发。

DOM操作

我们可以用JavaScript来获取到video对象，从而操作视频的一系列属性和方法。DOM提供了多种接口，如:

var video = document.getElementsByTagName('video')[0];

我们可以用video的属性和方法来控制视频。

例如：

video.play(); // 开始播放
video.pause(); // 暂停播放
video.currentTime = 10; // 从第10秒开始播放
video.volume = 0.5; // 设置音量为50%

结语

以上是HTML中的视频媒体组属性和DOM操作的相关介绍，了解了这些，我们就可以灵活运用它们，实现更多实用的功能。