卡卡网

在本文中，将详细介绍 HTML5 的 video 标签。<video>标签用于在文档中嵌入视频内容，例如电影剪辑或其他视频流。

顾名思义，<video>标签用于在浏览器上显示视频文件。你可以使用此标签在你的网站上显示你创建的视频。在网站上显示的视频文件类型存在限制，只能使用.mp4、.webm和.ogg文件类型。除此之外，其他格式的视频不会显示在网页上。

现在，仅将这些标签放在 HTML 文本中并不能保证视频会被显示。必须指定视频的路径。你可以使用<source>标签来做到这一点。

句法

<video>
         <source src="video-path.mp4" type="video/mp4">
</video>

以上是<video>标签的语法。如你所见，我们使用“src”属性提供了 mp4 文件的路径。这将在你的网站上显示你的视频。

<video>标签有许多可用的属性，它允许你为你的视频做几乎任何事情。让我们看看属性。

属性

HTML 标签中的属性用于向我们的标签添加一些自定义功能。它用于提供有关你的标签的额外信息，例如控件、宽度、高度等。我们在上面已经看到，仅提供<video>标签是不够的。你必须将属性 'src' 与<source>标签一起写入，并传递视频的路径才能显示视频。以下是你可以在<video>标记内使用的属性列表。

• width和height 高度和宽度属性用于指定 HTML 中视频大小的高度和宽度。通常，每个视频都有特定的尺寸，例如16×9（垂直视图）或9×16（水平视图）。同样，你可以选择视频分辨率的宽度和高度。

让我们看一个例子

<video>
  <source src="bridge.mp4" type="video/mp4">
</video>

<video width="320" height="240">
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

运行此代码后，你可以看到以下输出。

我希望你能理解视频的大小是如何改变的。在这些属性中传递的值的单位始终是像素。值越大，尺寸越大。

• controls 此为控件属性，允许我们显示各种控件，例如播放、暂停、音量调整、全屏图标和3个点（它甚至可以让你在视频上下载视频文件）。你只需将控件编写为属性。 

让我们看看这个例子

<video controls>
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

以下是输出

在输出上，你现在可以看到播放和暂停按钮、全屏按钮等控件。

• poster 视频海报设置。每当视频显示在屏幕上时，下载和显示都需要一些时间。如果文件较大且连接性较低，你可能会看到加载图标。相反，你可以使用海报属性在视频上添加图像，该图像在视频完全加载后消失。 

让我们看看这个例子

<video controls poster="image.png">
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

以下是输出

请注意，显示的是图像而不是加载图标。除非你播放视频，否则图像将一直存在。

• muted 此属性是静音设置，假设你的视频有一些音乐，并且你不希望它在视频播放时开始播放。你可以使用此属性来执行此操作。 

让我们看看这个例子。

<video controls muted>
  <source src="ocean.mp4" type="video/mp4">
</video>

demodownload

播放视频时，你不会听到任何声音，因为视频将被静音。

• autoplay 此属性的作用是在视频完全下载后立即自动播放视频。用户不必按下播放按钮，因为视频会自行开始。这里唯一的限制是你必须使用“静音”属性和“自动播放”属性。

例子

<video autoplay muted controls>
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

• loop 此属性允许我们无限次重复特定视频。视频一结束，一切就会重新开始。

让我们看看这个例子。

<video controls loop>
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

将视频播放到最后，你会看到视频又从头开始播放。

• preload 此属性允许你询问用户他们希望在页面加载后如何加载你的视频。它基本上具有三个值 - auto、metadata和none。
  auto值将在页面加载时加载整个视频。
  metadata页面加载时，元数据值将仅加载视频的元数据。
  none值在页面加载时根本不会加载视频。

<video controls preload="auto">
  <source src="bridge.mp4" type="video/mp4">
</video>

<video controls preload="metadata">
  <source src="bridge.mp4" type="video/mp4">
</video>

<video controls preload="none">
  <source src="bridge.mp4" type="video/mp4">
</video>

• 全局属性

HTML 提供了一些全局属性。正如名字所说的“全局”，我们可以得到这些属性可以被 HTML 的所有元素使用的提示。下面是所有全局属性的列表。

• 事件属性

HTML 有一些全局事件属性，只要浏览器上发生事件，就会调用这些属性，例如鼠标单击、keyup、keydown、mousemove、onload、ondrag等。与浏览器界面交互的任何操作都是一个事件。<video>标签支持所有这些。

总结

本文详细介绍了HTML5中的<video>视频标签及其用法。弄清<video>视频标签各个属性的含义，我们就可以在网页上轻松创建自己的视频。

相关文章

• hivideo——网页不用flash播放mp4视频文件

标签: 视频标签  video标签