如何在 HTML5 中显示视频控件?
HTML 中提供了 embed、object 和 iframe 标签来显示视频控件。有时我们想在观看视频时使用停止按钮暂停视频，但不知道具体发生了什么。布尔属性定义为 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
在下面的示例中，我们将使用一个设置属性控件的视频元素。此属性定义了网页输出的所有功能，如音量开/关、播放、暂停等。然后设置视频的属性高度和宽度，以代表水平和垂直两侧的更好长度。
<!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://www.cainiaomax.com/videos/sample720.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
示例 2
在以下示例中，将使用 embed 元素来设置三个属性:src(用于粘贴链接，并在链接末尾添加 ?controls)、高度和宽度，以设置视频的最佳长度。
<html>
<title>Video controls using embed element</title>
<body>
<center>
<h1>Tutorialspoint</h1>
<embed src="https://www.cainiaomax.com/videos/sample720.mp4?controls" height="320px" width="500px"></embed>
</center>
</body>
</html>
示例 3
在以下示例中，我们将使用新的 Trend 元素，即可用于在 HTML 中显示视频控件的对象。该元素具有一个名为 data 的属性，用于存储视频的链接/路径，以及一些属性，例如高度和宽度，这些属性通过覆盖合适的长度来提高视频的可视性。
<!DOCTYPE html>
<html>
<title>Display the video control using </title>
<body>
<center>
<h1>Tutorialspoint</h1>
<object data="https://www.cainiaomax.com/videos/sample720.mp4?controls" height="320px" width="500px"></object>
</center>
</body>
</html>
结论
我们通过在 HTML 中显示视频控件来探索这三个不同的标签。在第一个示例中，我们仅通过 iframe 标签显示视频。在同一个第二个示例中，我们使用了 iframe、embed 和 object 三个不同的标签，并通过控制所有视频功能的"controls"属性来显示视频。
