HTML - video 标签

HTML <video> 标签用于将视频媒体播放器嵌入到网站中。为了正确呈现，您应该提供各种视频格式，因为并非所有浏览器都支持相同的格式。在 <source> 标记或 src 属性中，视频文件的路径是嵌套的。如果浏览器不支持视频格式，您可以选择在 <video> 标记中提供替代文本，该文本将显示出来。

<video> 标签支持的三种视频格式是 MP4/MPEG 4、WebM 和 Ogg。

语法


<video src="..." controls></video>

属性

<video> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出。

属性	值	描述
autoplay	autoplay	指定视频将自动播放。
controls	controls	指定显示视频控件。
height	pixels	指定视频媒体播放器的高度。
loop	loop	指定视频在每次完成后再次开始播放。
muted	muted	指定音频应静音。
poster	URL	指定在下载视频时要显示的图像。
preload	auto metadata none	指定作者认为将导致最佳用户体验的内容。
src	URL	指定视频路径的 URL。
width	pixels	指定视频媒体播放器的宽度。

<video> 标签示例

下面的示例将说明<video> 标签的用法。在哪里、何时以及如何使用它来渲染视频播放器，以及我们如何使用 CSS 操作视频播放器。

使用<video> 标签创建视频播放器

让我们看一下以下示例，其中我们将使用设置为“auto”的 preload 属性值，该值在页面加载时加载整个视频。


<!DOCTYPE html>
<html>
<body>
    <center>
        <video width="400" height="200" controls preload="auto">
        <source src="https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" type="video/mp4">
        </video>
   </center>
</body>
</html>

带控制元件的视频播放器

以下示例，我们将使用 controls 属性，该属性用于添加播放、暂停、音量等控件。


<!DOCTYPE html>
<html>
<body>
    <center>
        <video width="420" height="250" controls>
        <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
        </video>
    </center>
</body>
</html>

页面加载后自动播放视频

在以下示例中，我们将使用 autoplay 属性使视频自动开始。


<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6">
    <center>
        <video width="420" height="250" autoplay>
        <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
        </video>
    </center>
</body>
</html>

带有播放和暂停按钮的视频播放器

考虑以下示例，我们在其中运行脚本并添加播放/暂停、大屏幕和小屏幕等事件。


<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
    <div style="text-align:center">
        <button onclick="Pauseplay()">PLAY/PAUSE</button>
        <button onclick="BScreen()">BIG SCREEN</button>
        <button onclick="SScreen()">SMALL SCREEN</button>
        <br>
        <video id="tutorial" width="400">
        <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
        </video>
    </div>
    <script>
        var testvideo = document.getElementById("tutorial");
        function Pauseplay() {
           if (testvideo.paused) testvideo.play();
           else testvideo.pause();
        }
        function BScreen() {
           testvideo.width = 500;
        }
        function SScreen() {
           testvideo.width = 200;
        }
    </script>
</body>
</html>

支持的浏览器

浏览器
<video>	4.0	9.0	3.5	3.1	11.5

打印本页