HTML中的<video>标签的格式和其中的属性的用法

最新推荐文章于 2025-07-29 22:04:14 发布

杨宗健

最新推荐文章于 2025-07-29 22:04:14 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML新手学习

本文链接：https://blog.youkuaiyun.com/Ameir_yang/article/details/61920514

HTML新手学习专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML中的<video>标签使用方法及其各种属性，包括不同格式的支持方式，以确保视频内容能在所有主流浏览器中正常播放。

<video>标签

<video>格式一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>video标签</title>
        <base target="_self">
    </head>
<body>
    <video src="视频地址"></video>
</body>
</html>

<video>格式二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>video标签</title>
        <base target="_self">
    </head>
<body>
    <video>
        <source src="" type=""></source>
        <source src="" type=""></source>
        <source src="" type=""></source>
    </video>
</body>
</html>

<video>标签中的属性：

src : 指明视频的文件位置。

autoplay ：设置视频是否自动播放。

controls ：设置视频控制按钮（暂停、播放、快进、全屏、进度条）。

poster : 当视频不设置自动播放的时候，poster是用来设置视频占位图的，进入视频之前的图片。

preload : 设置视频为预加载。注意项：preload 与 autoplay相冲（排斥），如果视频之前设置了autoplay属性，再设置preload属性，preload属性将失效。

loop：设置视频是否在播放完后循环播放。（此属性常常用在网页里面的广告，在网页四个角落的小广告）。

width与height ：设置视频的长宽。

<voide>格式二的优势：

因为五大浏览器没有一个能够满足所有的视频格式，所以w3c提出了video的第二种格式，就是为了满足所有的浏览器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>video标签</title>
        <base target="_self">
    </head>
<body>
    <video width="" height="" poster="" controls="" autoplay="" preload="">
        <source src="x.ogg" type="video/ogg"></source>
        <source src="x.mp4" type="video/mp4"></source>
        <source src="x.WebM" type="video/WebM"></source>
    </video>
＜！－－在ｗ３ｃ上面看用法－－＞
</body>
</html>