HTML 视频
- HTML
<video>
标签的基本用法:使用<video>
标签和<source>
标签嵌入视频播放器到 HTML 页面,包括指定视频文件路径和类型。 - 多源视频播放:通过提供多个
<source>
标签,可以为视频设置多个来源,从而确保视频在不同浏览器上的兼容性。 <video>
标签的重要属性:包括autoplay
自动播放视频、controls
显示控件、loop
循环播放、muted
静音、poster
设置视频封面、preload
预加载设置等,以增强视频播放的功能和用户体验。
HTML <video>
标签用于将支持视频播放的媒体播放器嵌入到 HTML 页面中。我们使用 HTML <video>
标签和 <source>
标签来展示视频。例如,
<video width="320" height="190" controls>
<source src="video.mp4" type="video/mp4" />
</video>
浏览器输出
在上述代码中,
video.mp4
- 我们想要展示的视频的路径video/mp4
- 我们想要展示的资源类型controls
- 允许用户控制视频
上述示例中的 video.mp4
文件位于与 HTML 文件相同的目录中。
注意:建议为视频指定 height
和 width
,类似于 HTML 图像标签,以防止初始页面加载时出现闪烁。
带有多个 <source>
标签的 HTML <video>
我们可以使用 <source>
标签为视频提供多个来源。例如,
<video width="320" height="190" controls>
<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
</video>
在上述示例中,浏览器选择支持的第一个 <source>
标签的资源。如果浏览器不支持 ogg
格式,它将移动到下一个 <source>
标签并播放 mp4
文件。这有助于视频在广泛的设备上播放。
HTML <video>
标签的属性
让我们看看 HTML <video>
标签支持的属性。
autoplay
controls
height
和width
loop
muted
src
preload
我们将详细了解这些属性。
自动播放(autoplay)
autoplay 属性会自动播放视频。例如,
<video width="320" height="190" controls autoplay>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
在上述程序中,我们使用了 autoplay
属性。视频将在准备就绪时自动开始播放,无需用户点击播放按钮。
注意:autoplay 属性通常被认为是不良的用户体验,因为它可能会让用户感到烦恼。一些浏览器不允许视频自动播放,除非它同时被静音。
控制(controls)
controls
属性允许用户控制视频。这些控制可能包括播放按钮、暂停按钮和音量控制等。这对于允许用户控制视频播放很有帮助,而无需使用任何额外的软件或工具。例如,
<video width="320" height="190" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
这里,我们可以看到浏览器提供的控制选项。
高度和宽度
<video>
元素中的 height
和 width
属性指定了视频播放器的尺寸(以像素为单位)。例如,
<video width="600" height="350" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
在上述示例中,视频播放器的 width
和 height
分别设置为 600 和 350 像素。
我们也可以通过在样式表中或使用 style
属性对 <video>
元素应用 width
或 height
属性来设置视频的宽度或高度。例如,
<video style="height: 350px; width: 600px;" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
height
和 width
属性让浏览器知道为视频分配多少空间。否则,当视频加载时,它将导致周围内容移动。
循环(loop)
loop
属性指定视频在结束后将自动从头开始播放。例如,
<video width="320" height="190" loop controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
静音(muted)
静音属性将视频的音量设置为 0。例如,
<video width="320" height="190" muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
海报(poster)
poster
属性指定了一个图片链接,用于显示在视频未播放或仍在下载时。它类似于视频的缩略图。它显示在视频播放器将要显示的位置,为用户在决定播放之前提供了关于视频内容的视觉提示。例如,
<video width="300" height="220" controls poster="poster.png">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
浏览器输出
如果你没有指定海报帧,视频的第一帧将被显示为海报帧。
源(src)
src
属性指定应在视频播放器中播放的视频文件的位置。例如,
<video src="/videos/sample.mp4"></video>
这里,<video>
元素的 src
属性用于指定应在视频播放器中播放的单个视频文件的位置。这是在 HTML 页面中包含视频的最简单方式。
注意:HTML 视频至少需要一个 src
属性或 <source>
标签。
预加载(preload)
preload
属性指定视频文件在页面加载后应如何加载,以提供更好的用户体验。它可能具有以下值之一:
none
:表示不应预加载视频。例如,
<video preload="none" src="/videos/sample.mp4"></video>
metadata
:表示只获取视频元数据。例如,
<video preload="metadata" src="/videos/sample.mp4"></video>
auto
:表示页面加载时将加载整个视频文件。例如,
<video preload="auto" src="/videos/sample.mp4"></video>