如何在HTML5中显示视频控件？

HTML 使用 embed、object 和 iframe 标签在 HTML5 中显示视频控件。有时我们想观看视频并使用停止按钮暂停视频，但我们不知道究竟发生了什么。布尔属性定义为controls，该属性包括播放、暂停、音量、轨道、全屏模式和字幕开关。

可视化表示

语法

以下语法用于示例：

<video controls>
<source src = "paste the path of video" type = "video/mention the type format" >
</video>

video 元素用于在 HTML 文档中显示视频。source 元素具有 src 属性，允许用户粘贴视频的链接/路径。type 属性用于提及视频格式的类型。例如：mp3、mp4、wav 等。

<embed src="https://www.youtube.com/embed/G3pdpsJxE-A?controls"></embed>

embed 元素用于插入外部资源，例如 pdf、音频和视频。

<object data="https://www.youtube.com/embed/3giyUDx2Yik?controls"></object>

object 元素执行与 embed 标签相同的函数，也用于插入外部资源。

使用的属性

示例中使用的属性：

  • height − 此属性定义视频的高度。

  • width − 此属性定义视频的宽度。

  • color − 此属性定义文本的颜色。

  • font-weight − 此属性将文本定义为粗体。

示例 1

在下面的示例中，我们将使用一个设置了 controls 属性的 video 元素。此属性定义网页输出中的所有功能，例如音量开关、播放、暂停等。然后设置视频的高度和宽度属性，以表示水平和垂直两侧的最佳长度。

Open Compiler
<!DOCTYPE html>
<html>
<title>Video tag to display the video controls</title>
<body>
   <center>
      <h1>Tutorialspoint</h1>
      <video width="420" height="240" controls>
         <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      </video>
   </center>
</body>
</html>

示例 2

在下面的示例中，将使用 embed 元素，该元素设置三个属性：src（用于粘贴链接并在链接末尾添加?controls）、height 和 width，以设置视频的最佳长度。

Open Compiler
<html>
<title>Video controls using embed element</title>
<body>
   <center>
      <h1>Tutorialspoint</h1>
      <embed src="https://tutorialspoint.com/videos/sample720.mp4?controls" height="320px" width="500px"></embed>
   </center>
</body>
</html>

示例 3

在下面的示例中，我们将使用新的趋势元素，即 object，它可用于在 HTML 中显示视频控件。此元素具有一个名为 data 的属性，用于存储视频的链接/路径以及一些属性，例如 height 和 width，这些属性通过覆盖良好的长度来设置视频的最佳可见性。

Open Compiler
<!DOCTYPE html>
<html>
<title>Display the video control using </title>
<body>
   <center>
      <h1>Tutorialspoint</h1>
      <object data="https://tutorialspoint.com/videos/sample720.mp4?controls" height="320px" width="500px"></object>
   </center>
</body>
</html>

结论

我们通过在 HTML 中显示视频控件来探索了三个不同的标签。在第一个示例中，我们仅从 iframe 标签显示视频。在第二个示例中，我们使用三个不同的标签（iframe、embed 和 object）通过使用控制所有视频功能的“controls”属性来显示视频。

更新于：2023年5月15日

314 次查看

开启你的职业生涯

完成课程获得认证

开始学习
广告