HTML - 如何用HTML 5视频标签嵌入视频播放器

后端之巅
610 阅读3分钟

在HTML 5出现之前，网络开发者必须用Adobe flash player等插件在网页上嵌入视频。

今天，你可以通过<video> 标签轻松地将视频嵌入到HTML文档中。

在这篇文章中，我们将看到<video> 标签在HTML中是如何工作的。

内容表

基本语法

就像<img> 标签一样，<video> 需要一个src 属性，你需要用它来指定视频的来源。

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

默认情况下，它在浏览器中像图像一样显示。
ss-1-2

这个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 属性

使用海报属性，你可以在视频开始播放前或在下载过程中加入一张图片来显示。

<video src="weekend.mp4" poster="benefits-of-coding.jpg"></video>

浏览器将显示这张图片，而不是视频的第一个场景的图片。
ss-2-2

Thecontrols Attribute

当你使用控制时，它可以让浏览器显示播放控制器，如播放和暂停、音量、寻找等。

<video
      controls
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

ss-3-1

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 属性

你可以使用宽度和高度属性来指定视频的宽度和高度，单位为像素。它只接受绝对值，例如，像素。

<video
      controls
      loop
      autoplay
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

ss-4-1

muted 属性

你可以使用静音属性来告诉浏览器在开始播放视频时不要播放任何与之相关的声音。

<video
      controls
      loop
      autoplay
      muted
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

ss-5-1

如果指定了controls 属性，用户可以点击音量按钮来取消静音。

preload 属性

通过预加载属性，你可以向浏览器提供一个提示，说明在页面加载时是否要下载视频。

这个属性对用户体验至关重要。

你可以在preload属性中使用3个值。

  • none：指定视频在用户按下播放键之前不会加载。

  • 自动：指定视频应该被下载，即使用户没有按下播放键

  • 元数据：指定浏览器应收集元数据，如长度、大小、持续时间等。

<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> 标签来实现这一目的。

avatar
文章
阅读
粉丝