数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在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 元素。此属性定义网页输出中的所有功能，例如音量开关、播放、暂停等。然后设置视频的高度和宽度属性，以表示水平和垂直两侧的最佳长度。
<!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，以设置视频的最佳长度。
<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，这些属性通过覆盖良好的长度来设置视频的最佳可见性。
<!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”属性来显示视频。
314 次查看
