html5的音频和视频

来源：互联网发布：淘宝上的指纹锁靠谱吗编辑：程序博客网时间：2024/05/16 10:54

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.onload=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,如果当前媒体数据无效，就用该图
方法太多了，到时候查吧

0 0