html5_音视频元素_audio&video

黎豆子 2020-02-18

浏览器兼容性:IE9以上以及其它现代浏览器均支持

<h2>音频播放</h2> 
<audio src="music.mp3" controls>     
    您的浏览器不支持audio元素 
</audio>
<h2>视频播放</h2> 
<video src="movie.mp4" controls>     
    您的浏览器不支持video元素 
</video>

audio、video支持的元素:

src:

autoplay:布尔值,设置为true后音视频会自动播放(新版浏览器大多禁止自动播放,实测没用)。

controls:布尔值,也可以直接添加。会显示音视频的进度条。

loop:布尔值,也可直接添加。设置为true后会循环播放。

preload:指定是否预加载音视频。有三个值:

auto:预加载音视频。

metadata:只预加载音视频元数据。如媒体字节数、第一帧、播放列表、持续时间等。

none:不执行预加载。

(指定了autoplay属性后preload会被自动忽略)

poster:只对<video>元素有效,该属性指定一张图片的URL地址。在视频下载完成、开始播放之前,该元素将会显示该属性指定的图片。视频不可用时同样显示它。

width、height:只对<video>元素有效,指定视频播放器的宽高。

目前HTML5推荐使用VP8作为视频压缩格式。

对于音频格式而言:

IE9不支持OGG Vobis,FF和Opera不支持MP3。

对于视频格式而言:

IE9不支持OGG Theora,FF和Opera不支持H.264。

鉴于此,开发者可以借助<source>子元素指定多个媒体源。它包括src和type两个属性:

src:音视频的URL地址。

type:指定音视频的格式。该值的格式可为简单的MIME字符串:”audio/ogg“,"audio/mpeg";也可以是MIME字符串并带codecs属性,codecs属性用于指定视频文件的编码格式,例如” audio/ogg;codecs=‘vobis‘ “。

通常推荐指定type属性。如果不指定type浏览器需要先下载一小段音频或视频才能判断文件的类型,会造成流量浪费。

示例:

<h2>音频播放</h2> 
<audio controls>     
    <source src="demo.ogg" type="audio/ogg" media="aaa">
    <source src="demo.mp3" type="audio/mpeg">     
    <source src="demo.wav" type="audio/x-wav"> 
</audio>

如上所示,浏览器会自己寻找可播放的格式资源进行下载。

相关推荐