html5学习之多媒体播放

html5 新增两个元素：audio元素和video 元素，分别用来处理音频和视频数据。

浏览器对编码格式的支持情况：

IE9

支持H.264 视频编码格式和vp8视频编码格式

支持mp3音频和wav音频编码格式

Firefox 4以上

支持Ogg Theora视频编码格式和vp8视频编码格式

支持Ogg vorbit音频编码格式和WAV音频编码格式

Opera 10以上

支持Ogg Theora视频编码格式和vp8视频编码格式

支持Ogg vorbit音频编码格式和WAV音频编码格式

Chrome 6以上

支持H.264 视频编码格式、Ogg Theora视频编码格式和vp8视频编码格式

支持Ogg vorbit音频编码格式和mp3音频编码格式

audio元素的使用

注：如果不加 “controls” 在浏览器上不会显示播放器

audio 和video元素的属性：

src ：指定媒体数据的URL

autoplay ：指定媒体数据是否在页面加载的时候自动播放

preload :z指定视频是否预加载，该属性可选值：none，metadata，auto 。

none：表示不进行预加载。

metadata：表示只预加载媒体的元数据（媒体字节数第一帧播放列表持续时间）

auto：表示预加载所有数据

poster（video特有属性）：当视频不可用时，可以使用该元素向用户展示一副图片。

loop：该属性中指定是否循环播放

controls ：指定是否为视频或音频添加浏览器自带的播放用的控制条

error：在读取、使用媒体数据过程中，正常情况，error为null，只要出现错误，error属性将返回MediaError对象，该对象code返回相应的错误状态，错误状态有4个值。

MEDIA_ERR_ABORTED (数字值为1)：媒体数据的下载过程由于用户操作原因被中止

MEDIA_ERR_NETWORK（数字值为2）：媒体资源可用，但下载过程出现错误

MEDIA_ERR_DECODE（数值为3）：媒体资源可用，但解码出现错误

MEDIA_ERR_SRC_NOT_SUPPORTED（数值为4）：媒体资源不可用格式不被支持。

            <video id="video1" src="../../html5/Wildlife.wmv" poster="../../html5/Penguins.jpg" controls></video>
                <script>
                var video=document.getElementById("video1");
                video.addEventListener("error",function(){
               var error=video.error;
                switch(error.code){
                        case 1:alert("视频下载过程被中止。");break;
                        case 2:alert("网络错误");break;
                        case 3:alert("解码错误");break;
                       case 4:alert("不支持播放视频格式");break;

}
},false);

</script>

networkState属性：读取当前网络的状态。

currentSrc：读取播放媒体数据的URL地址。

video和audio的方法

play：播放

pause：暂停

load：重新加载媒体进行播放

canPlayType：测试浏览器是否支持指定的媒体类型

秒客网

html5学习之多媒体播放

相关文章