html5不支持的特性:
- 流式音频和视频
- 媒体受到http跨源资源共享的限制
- 全屏视频无法通过脚本限制
一般的编码:
- 音频的编码
- mp3编码
- acc编码
- ogg编码
- 视频的编码:
- h264编码
- vp8编码
- theora编码
检测浏览器的支持性:
- 音频的监测:
-
- <!DOCTYPE HTML> <head> <script type/javascript> function checkAudio(){ var myAudio = document.createElement('audio'); if (myAudio.canPlayType) { if ( "" != myAudio.canPlayType('audio/mpeg')) { document.write("您的浏览器支持mp3编码。<br>"); } if ( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) { document.write("您的浏览器支持oog编码。<br>"); } if ( "" != myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')) { document.write("您的浏览器支持aac编码。"); } } else { document.write("您的浏览器不支持要检测的音频格式。"); } } window.οnlοad=function() { checkAudio(); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> </body> </html>
-
视频的监测:
-
<!DOCTYPE HTML>
<head>
<script type/javascript>
function checkVideo(){
var myVideo = document.createElement('video');
if (myVideo.canPlayType) {
if ( "" != myVideo.canPlayType('video/mp4;codecs="avc1.64001E"')) {
document.write("您的浏览器支持h264编码。<br>");
}
if ( "" != myVideo.canPlayType('video/ogg; codecs="vp8"')) {
document.write("您的浏览器支持vp8编码。<br>");
}
if ( "" != myVideo.canPlayType('video/ogg; codecs="theora"')) {
document.write("您的浏览器支持theora编码。");
}
}
else {
document.write("您的浏览器不支持要检测的视频格式。");
}
}
window.onload=function()
{
checkVideo();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
</html>
书写: -
音频:
<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls">
<source src="medias/Wah Game Loop.ogg" >
<source src="medias/Wah Game Loop.mp3" >
您的浏览器不支持audio标签。
</audio>
</body>
</html>
视频:
<video>
<source src="medias/volcano.ogv" >
<source src="medias/volcano.mp4">
您的浏览器不支持
</video>
-
列表的书写顺序:用于体验由高到低,服务器消耗由低到高
音频和视频相关的属性和方法:
- 属性
- autobuffer :自动缓冲,true/false
- autoplay :自动播放,true/false
- controls :可控制,controls
- loop:循环
- paused:暂停,true/false
- buffered :只读属性,返回TimeRanges对象,确认浏览器已经缓存的媒体文件
- currentSrc :只读,返回媒体数据的url
- currentTime: 可读写,返回或者设置当前的播放位置
- defaultPlaybackRate:可读写,获取设置播放速率
- duration :只读,持续时间
- error:只读,返回当前的错误状态
- 1:资源获取异常-下载过程因为用户操作而终止
- 2:网络错误
- 3:解码错误
- 4:格式不被支持
- networkState:网络状态
- 0:还没初始化
- 1:加载完成,网络空闲
- 2:加载中
- 3:加载失败
- initialTime:只读,获取可用于回放的位置
- muted:是否静音,true/false
- played: 在浏览器中播放的时间
- length:已播放的时间段
- start
- end
- preload:
- none :不预加载
- metadata:部分预加载
- auto :全部预加载
- readyState: 当前位置的就绪状态
- 0;没有有效的媒体资源
- 1:加载中
- 2::已经获取,但是没有足够的数据播放
- 3:获取,可播放
- 4:可播放,而且稳定
- src :配合poster,如果当前媒体数据无效,就用该图
- 方法太多了,到时候查吧