HTML - <video> 标签

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

<video> 元素支持三种视频格式：MP4/MPEG 4、WebM 和 Ogg。

语法

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

属性

HTML video 标签支持 HTML 的全局和事件属性，以及一些列出的特定属性。

属性	值	描述
autoplay	autoplay	指定视频将自动播放。
controls	controls	指定显示视频控件。
height	像素	指定视频媒体播放器的高度。
loop	loop	指定视频播放结束后会再次开始。
muted	muted	指定音频应静音。
poster	URL	指定在视频下载期间显示的图像。
preload	auto metadata none	指定作者认为最能带来最佳用户体验的内容。
src	URL	指定视频路径的 URL。
width	像素	指定视频媒体播放器的宽度。

HTML video 标签示例

下面的示例将演示 video 标签的使用方法、何时何地使用它来渲染视频播放器以及如何使用 CSS 操作视频播放器。

使用 Video 标签创建视频播放器

让我们看下面的例子，我们将把 preload 属性的值设置为“auto”，这会在页面加载时加载整个视频。

<!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

html_tags_reference.htm

打印页面