video标签属性用法介绍(HTML5新增video标签及对应属性)

一、src属性

src属性是必需的,指定要嵌入的视频文件的URL,可以是相对路径或绝对路径。如果没有指定该属性,视频将不会播放。

以下是一个简单的示例:

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

注意:src属性的值必须被引号包围。

二、controls属性

controls属性创造视频控制条,如播放/暂停、声音调节、全屏等。如果未设置该属性,则不会出现控制条。

以下是一个简单的示例:

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

三、autoplay属性

autoplay属性在加载页面时自动播放视频。通常与loop属性结合使用,循环播放视频。

以下是一个简单的示例:

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

四、loop属性

loop属性循环播放视频,当视频播放结束时,它将从开头重新开始播放。

以下是一个简单的示例:

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

五、muted属性

muted属性将视频的音频静音。它通常与autoplay属性结合使用。

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

六、poster属性

poster属性指定视频播放前要显示的图像的URL。如果用户单击该图像,视频将开始播放。

以下是一个简单的示例:

<video src="movie.mp4" poster="image.jpg" controls></video>

七、preload属性

preload属性告诉浏览器是否应在页面加载时预加载视频。

以下是使用预加载的示例:

<video src="movie.mp4" preload="auto" controls></video>

以下是不使用预加载的示例:

<video src="movie.mp4" preload="none" controls></video>

八、width和height属性

width和height属性设置嵌入视频时的宽度和高度。它们可以用像素数或百分比表示。

<video src="movie.mp4" width="320" height="240" controls></video>

九、其他属性

除了以上提到的属性外,还有许多其他属性可以使用,如:currentTime、duration、ended、paused、playbackRate等。

以下是一个简单的示例:

<video src="movie.mp4" id="myVideo" controls></video>
<button onclick="document.getElementById('myVideo').play()">播放暂停</button>

在以上示例中,按钮调用JavaScript代码,以播放或暂停视频。

总结

视频已成为现代互联网中不可或缺的一部分。使用video标签,您可以轻松地将视频嵌入到网页中,并以各种方式进行自定义,如:控制条、预加载、循环播放和静音。

随着技术的不断发展,视频在互联网上的应用将越来越广泛。掌握video标签的各种属性,将是未来Web开发的关键之一。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注