初步学习HTML5(二)----视频

最新推荐文章于 2025-08-31 09:59:18 发布

原创最新推荐文章于 2025-08-31 09:59:18 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #浏览器 #Chrome #Safari #Firefox

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了常见的视频格式，包括Ogg、MPEG4和WebM，并详细讲解了如何利用HTML5的<video>标签来播放这些格式的视频文件。通过设置autoplay、controls等属性，可以轻松实现视频的自动播放及用户控制功能。

视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>

control 属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>

<video> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。