html5_音视频元素_audio&video
浏览器兼容性: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>
如上所示,浏览器会自己寻找可播放的格式资源进行下载。
相关推荐
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
示例一和示例二 参考尚硅谷老师的视频教程;window.AudioContext){alert("当前浏览器不支持哟!DOCTYPE html><html><head><meta charset="U