HTML5的音频和视频的巧用

最新推荐文章于 2023-12-21 09:07:56 发布

weixin_40263603

最新推荐文章于 2023-12-21 09:07:56 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40263603/article/details/78110386

本文详细介绍了HTML5中<audio>和<video>元素的使用方法及属性，包括preload、autoplay、loop等，并展示了如何通过<source>元素支持多种格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、音频和视频

<audio src="路径" controls></audio>

<audio>元素还支持另外三个属性：preload/autoplay和loop

preload属性告诉浏览器如何下载音频，下载过程是后台，网页访客不必等待下载完成,如果preload指定的值是auto，就是让浏览器下载整个文件，以便用户单击播放按钮时就能播放。如果指定的值是none，告诉浏览器不必预先下载，如果指定的值是metadata，告诉浏览器先获取音频文件开头的数据块，从而确定一些基本信息。如果使用的是 none或metadata，那么浏览器会在用户单击播放按钮时立即下载音频文件，浏览器在下载后续数据时会播放已经下载的部分

	<audio src="路径" controls preload="metadata"></audio>

autoplay属性告诉浏览器在加载完音频后就立即播放,如果不是设置autoplay的属性，必须是用户点击播放按钮才会播放音频文件，要实现背景播放，去掉controls，加上 autoplay属性就好了

	<audio src="路径" controls autoplay></audio>

loop属性告诉浏览器在音频到达末尾时，再从头开始重新播放

	<audio src="路径" controls loop></loop>

2、<video src="路径" controls></video>

height和width属性用于设置视频窗口（像素）大小，示例如下：<video src="路径" controls width="400" height="300"></video> 设置这个尺寸时应该注意按照视频的原始比例设置

poster属性是用于设置替换视频的图片。浏览器会在这三种情况下会使用这个图片：（1）视频第一帧未加载完毕；（2）把preload属性设置为none；（3）没有找到指定的视频文件；

3、使用<source>元素使浏览器支持多种格式

第一把要从<video><audio>元素中删除src属性，然后嵌套一组<source>元素，示例如下：

	<audio controls>
		<source src = "路径" type = "audio/mp3">
		<source src = "路径" type = "audio/ogg">
	</audio>

	<video controls width = "700" height = "400">
		<source src = "路径" type = "video/mp3">
		<source src = "路径" type = "video/ogg">
	</video>