原文:HTML Video – How to Embed a Video Player with the HTML 5 Video Tag,作者:Kolade Chris
在 HTML 5 出现之前,Web 开发者必须用 Adobe flash player 等插件在网页上嵌入视频。
今天,你可以通过 <video>
标签轻松地将视频嵌入到 HTML 文档中。
在这篇文章中,我们将看到 <video>
标签在 HTML 中是如何工作的。
目录
- 基本语法
<video>
标签的属性src
属性poster
属性controls
属性loop
属性autoplay
属性width
和height
属性muted
属性preload
属性- 总结
基本语法
就像 <img>
标签一样,<video>
具有 src
属性,在这里你需要注明视频来源。
<video src="weekend.mp4"></video>
默认情况下,它在浏览器中显示为图像:
这个 CSS 将网页中的所有内容居中,并改变背景颜色。
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
此外,你可以用 <source>
标签为 <video>
指定多个视频源。这个 <source>
标签也必须带有自己的 src
属性。
你可以使用多个 <source>
标签,使同一视频的不同格式可用。浏览器就会播放它所支持的格式。
<video controls>
<source src="weekend.mp4" />
<source src="weekend.ogg" />
<source src="weekend .webm" />
</video>
<video>
标签的属性
<video>
标签支持全局属性,例如:id
、class
、style
等等。
如果你想知道什么是全局属性,它们是所有 HTML 标签都支持的属性。
<video>
标签支持的具体属性包括 src
、poster
、controls
、loop
、autoplay
、width
、height
、muted
、preload
等等。
src
属性
src
属性用于指定视频的来源。它可以是你本地机器上的视频的相对路径,也可以是互联网上的实时视频链接。
<video src="weekend.mp4"></video>
它是可选的,因为你可以用 <source>
标签来代替它。
poster
属性
有了 poster
属性,你可以在视频开始播放前或在视频下载时显示一张图片。
<video src="weekend.mp4" poster="benefits-of-coding.jpg"></video>
浏览器将显示这个图像,而不是视频的第一个场景的图像:
controls
属性
当你使用 controls
时,它让浏览器显示播放控制器,如播放和暂停、音量、搜索等。
<video
controls
src="weekend.mp4"
poster="benefits-of-coding.jpg"
></video>
loop
属性
使用 loop
属性,你可以使视频自动重复。也就是说,让它在每次停止播放时重新开始播放。
<video
controls
loop
src="weekend.mp4"
poster="benefits-of-coding.jpg"
></video>
autoplay
属性
autoplay
属性让你在页面加载后立即自动开始播放视频。
<video
controls
loop
autoplay
src="weekend.mp4"
poster="benefits-of-coding.jpg"
></video>
width
和 height
属性
你可以使用 width
和 height
属性来指定视频的宽度和高度,单位为像素。它只接受绝对值,例如 xx 像素。
<video
controls
loop
autoplay
src="weekend.mp4"
width="350px"
height="250px"
poster="benefits-of-coding.jpg"
></video>
muted
属性
你可以使用 muted
属性告诉浏览器在开始播放时不播放与视频相关的任何声音。
<video
controls
loop
autoplay
muted
src="weekend.mp4"
width="350px"
height="250px"
poster="benefits-of-coding.jpg"
></video>
如果有 controls
属性,用户可以单击音量按钮取消静音。
preload
属性
通过 preload
属性,你可以向浏览器提供一个提示,说明在页面加载时是否要下载视频。
这个属性对用户体验至关重要。
你可以在 preload
属性中使用 3 个值:
- none:指定视频在用户按下播放键之前不会加载
- auto:指定视频应该被下载,即使用户没有按下播放键
- metadata:指定浏览器应收集元数据,如长度、大小、持续时间等
<video
controls
loop
autoplay
muted="true"
preload="metadata"
src="weekend.mp4"
width="350px"
height="250px"
poster="benefits-of-coding.jpg"
></video>
总结
在这篇文章中,你了解了 HTML5 的 <video>
标签及其属性,所以你可以在你的项目中以正确的方式使用它。
由于音频是一个完整视频的重要组成部分,你也可以使用 <video>
标签把音频文件放在网页上。但在大多数情况下,你应该使用 <audio>
标签来实现这一目的,保证良好的用户体验。
如果你觉得这篇文章有帮助,请与你的朋友和家人分享它,以便让更多可能需要它的人看到。