12.HTML基础——video标签和audio标签

山楂不甜

墨衍会员 · AI 创作全网分发码龄6年

关注

原创最新推荐文章于 2025-10-16 10:47:31 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

学习提速专享！AI工具全家桶免费用限时购周边加赠Coding Plan Lite，解锁20+主流AI工具，写代码、查资料快人一步！阅读详情

文章目录

video标签
audio标签

video标签

1.什么是video标签？

作用：播放视频
格式：

<video src="">
</video>

2.video标签的属性

2.1 src属性

用于告诉video标签需要播放视频的地址。

2.2 autoplay属性

用于告诉video标签是否需要自动播放视频。

2.3 controls属性

用于告诉video标签是否显示控制条。

2.4 poster属性

用于告诉video标签视频没有播放之前现实的占位图片。

2.5 loop属性

一般用于做广告视频，不能控制暂停还是播放，只能一直循环播放。

2.6 preload属性

预加载视频，但是需要注意preload属性和autoplay属性相冲，如果设置了autoplay属性，那么preload属性就会失效。

2.7 muted属性

静音。

2.8 width和height属性

设置视频的高度、宽度。

3.video标签的第二种格式

由于视频数据非常重要，所以五大浏览器厂商都不愿意支持别人的视频格式，所以导致了没有一种视频格式是所有浏览器都支持的。w3c为了解决这个问题，推出了第二种video标签的格式。

<video>
  <source src="" type="">
  <source src="" type="">
</video>

video标签的第二种格式存在的意义就是为了解决浏览器的适配问题。
video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么以后当浏览器播放视频时它就会从三种中选择一种自己支持的格式来播放。

<video>
  <source src="images/sb1.webm" type="video/webm">
  <source src="images/sb1.mp4" type="video/mp4">
  <source src="images/sb1.ogg" type="video/ogg">
</video>

注意点：
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，那就是浏览器必须支持html5标签，否则同样无法播放，在过去的一些浏览器是不支持HTML5标签的，所以为了让过去的一些浏览器也能通过video标签来播放视频，那么我们以后可以通过一个JS的框架——HTML5media来实现。

audio标签

1.什么是audio标签？

作用：播放音频

2.audio标签的格式

第一种格式：
<audio src="">
</audio>
第二种格式：
<audio>
  <source src="" type=""></source>
</audio>

3.注意点

audio标签的使用和video标签的使用基本一样，vedio中能够使用的属性audio标签中大部分都能使用，并且功能一样。
height/width/poster属性不能用。

收录于

笔记

html

标签

#html #html5 #前端

本内容遵循 CC 4.0 BY-SA 版权协议

video标签属性总结导读：video标签在H5页面上是常用的播放视频的标签，有很多新属性，在这里总结一下，作video的日常熟悉和平时使用时的翻阅查询之用。视频格式有.mp4 .webm .ogg这几种格式的，在浏览器上支持的最好的是.mp4所以推荐使用的视频播放源。阅读详情