html5+css3【6】

最新推荐文章于 2025-11-20 20:38:25 发布

原创最新推荐文章于 2025-11-20 20:38:25 发布 · 509 阅读

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

本文详细介绍了HTML5中video和audio元素的使用方法，包括如何在网页中播放视频和音频，不同浏览器对音视频格式的支持情况，以及source元素的使用。同时，还列举了video和audio元素的常用属性，如src、controls、width、height、autoplay、preload、poster、loop等。

影音多媒体

video元素和audio元素基础知识

video元素

在html5中专门用来播放网络上的视频或者电影。

audio元素

在html5中专门用来播放网络上的音频。

使用video和audio元素进行播放时就不再需要使用其他插件了，只要我们的浏览器支持html5就可以了！

浏览器的支持

Safari3以上、Firefox4以上、Opera10以上、chrome3.0以上版本都对audio元素和video元素支持！

使用方法

audio元素只需要给他一个指定的src属性：<audio src="MP3.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素之间加入提示语句代替,<audio src="MP3.mp3" controls="controls ">您的浏览器不支持audio元素

video元素要设定好长宽和src属性就可以了：<video width="750" height="400" src="time.mp4"></video>
同样对于不支持video的浏览器可以在中间加入替换文字：<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>

source元素指定多个播放格式和编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种中间支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：

<video>
	<source src="video.m4v" type = "video/mp4" />
	<source src="video.webm" type = "video/webm" />
	<source src="video.ogv" type = "video/ogg" />
	<source src="video.mp4" />
</video>

各种设备对编码格式的支持情况：
webm（.webm）格式的视频火狐4.0+、chrome6.0+、opera10.6+
mp4(.mp4)格式的视频 IE9.0+、Safari3.1+、ios5.0、Android4.0+
ogg(.ogv)格式的视频火狐3.5+、chrome3.0+、opera10.5+
mp4(.mp4)格式的视频 IE9.0+、safari3.1+ios3.0、Android2.3+。

audio元素和video元素的常用属性

src属性

在这个属性里面指定媒体数据的URL地址。

controls属性

指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放、暂停等按钮。
使用方法：<video src="video.mp4" controls="controls"></video>

width和height属性（video独有）

指定视频的宽度和高度。
使用方法：<video src="video.mp4" width="650" height="450"></video>

autoplay属性

这个属性指定是否当我们网页加载完成之后就开始自动播放。

preload属性

这个属性指定是否对数据进行预加载，如果是，浏览器会将视频数据或者音频数据进行缓冲，这样可以加快播放速度。
preload的三个属性值：
none表示不进行预加载。
metadata表示只预加载媒体的元数据。
auto（默认值）表示预加载全部的视频或是音频
使用方法：<video src"video.mp4" preload="aoto"></video>

poster属性（video独有）

当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频。
使用方法：<video src="video.mp4" poster="video.jpg"></video>

loop属性

指定是否循环播放视频或者音频数据。
使用方法：<video src="video.mp4" autoplay="aoto" loop="loop"></lvideo>

error属性

读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null。
4种错误状态，返回一个数字值，它表示音频/视频的错误状态：
1=MEDIA_ERR_ABORTED 取回过程被用户中止
2=MEDIA_ERR_NETWORK 当下载是发生错误
3=MEDIA_ERR_DECODE 当解码时发生错误
4=MEDIA_ERR_SRC_NOT_SUPPORTED 媒体不可用或者不支持音频/视频

networkstate属性

networkstate属性返回音频/视频的当前网络状态（activity）
4中错误状态，表示音频/视频元素的当前网络状态：
0=NETWORK_EMPTY 音频/视频尚未初始化
1=NETWORK_IDLE 音频/视频是活动的且已全区资源，但并未使用网络
2=NETWORK_LOADING 浏览拿起正在下载数据
3=NETWORK_NO_SOURCE 未找到音频/视频来源

标签

#css