标签：
HTML5之音频与视频
l 标签
? audio 、video
? source
l 视频容器
? 容器文件，类似于压缩了一组文件
– 音频轨道
– 视频轨道
– 元数据：封面，标题，字幕等
– 格式：.avi、.flv、.mp4、.mkv、.ogv等
l 编解码器
? 原始的视频容器非常大，添加需编码，播放需解码
? 音频编解码器
– AAC、MPEG-3、Ogg Vorbis
? 视频编解码器
– H.264、VP8、Ogg Theora
编解码器：每个浏览器可能用的编解码器不同，有开源，也有收费的。
编解码器在加载到页面时进行压缩，当点击播放时，再解码，放大。
<body>
<audio controlssrc="johann_sebastian_bach_air.mp3"></audio>
<!--<video controlssrc="Intermission-Walk-in.ogv"></video>-->//这种方式IE不支持改用下面的方式
<video controls>
<sourcesrc="Intermission-Walk-in.ogv"></source>
<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>//IE执行这一条
</video>
</body>
注意：
必须加控件才能显示
IE下没有对ogv格式的视频进行编解码器
Source 如果不支持，走下一条
l 媒体元素
? controls : 显示或隐藏用户控制界面
? autoplay : 媒体是否自动播放
? loop : 媒体是否循环播放
? currentTime : 开始到播放现在所用的时间
? duration : 媒体总时间(只读)
? volume : 0.0-1.0的音量相对值
? muted : 是否静音
? autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性
? currentTime : 开始到播放现在所用的时间
可以读取，也可以设置
可以设置刚开始进入时开始的播放时间
window.onload =function(){
var oA = document.getElementById(‘a1‘);
setInterval(function(){
console.log(oA.currentTime);
},1000);
//oA.currentTime = 60;//播放从60开始
};
</script>
</head>
<body>
<audioid="a1" controlssrc="johann_sebastian_bach_air.mp3"></audio>
</body>
? duration : 媒体总时间(只读)
? volume : 0.0-1.0的音量相对值
音量从0到1的值 0为静音
? muted : 是否静音
Flase 表示不是静音
window.onload =function(){
var oA = document.getElementById(‘a1‘);
console.log( oA.duration );
console.log( oA.volume );
console.log( oA.muted );
};
</script>
</head>
<body>
<audioid="a1" controls src="johann_sebastian_bach_air.mp3"></audio>
</body>
播放总时间
? autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性
页面一加载，则已经加载，不需要在播放器点开始时才加载
l 媒体元素_2
? paused : 媒体是否暂停(只读)
? ended : 媒体是否播放完毕(只读)
? error : 媒体发生错误的时候，返回错误代码 (只读)
? currentSrc : 以字符串的形式返回媒体地址(只读)
? play() : 媒体播放
? pause() : 媒体暂停
? load() : 重新加载媒体
? paused : 媒体是否暂停(只读)
? ended : 媒体是否播放完毕(只读)
? error : 媒体发生错误的时候，返回错误代码 (只读)
? currentSrc : 以字符串的形式返回媒体地址(只读)
window.onload =function(){
var oA = document.getElementById(‘a1‘);
console.log( oA.paused );
console.log( oA.ended );
console.log( oA.error );
console.log( oA.currentSrc );
};
</script>
</head>
<body>
<audioid="a1" controlssrc="johann_sebastian_bach_air.mp3"></audio>
</body>
? play() : 媒体播放
? pause() : 媒体暂停
? load() : 重新加载媒体
鼠标移入，播放，移出，暂停播放
改完地址后必须用load重新加载
window.onload = function(){
varoV = document.getElementById(‘v1‘);
varoInput = document.getElementById(‘input1‘);
varaS = document.getElementsByTagName(‘source‘);
oV.onmouseover= function(){
this.play();
};
oV.onmouseout= function(){
this.pause();
};
oInput.onclick= function(){
aS[0].src= ‘xxxx.mp4‘;
aS[1].src= ‘yyyy.mp4‘;
oV.load();
};
};
</script>
</head>
<body>
<input type="button"value="重新加载" id="input1" />
<video id="v1">
<sourcesrc="Intermission-Walk-in.ogv"></source>
<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
l 媒体元素_3 --媒体元素事件
? loadstart progress suspendemptied stalled play pause loadedmetadata loadeddata waiting playing canplaycanplaythrough seeking seeked timeupdate ended ratechange durationchangevolumechange
Ended播放完成后执行，弹出123
window.onload = function(){
varoV = document.getElementById(‘v1‘);
oV.addEventListener(‘ended‘,function(){
alert(123);
},false);
};
</script>
</head>
<body>
<video controls id="v1">
<sourcesrc="Intermission-Walk-in.ogv"></source>
<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
l Video额外特性
? poster : 视频播放前的预览图片
? width、height : 设置视频的尺寸
? videoWidth、 videoHeight : 视频的实际尺寸(只读)
实际尺寸，即使修改，也能查找原来的元素大小
window.onload = function(){
varoV = document.getElementById(‘v1‘);
oV.poster= ‘2.png‘;
oV.width= 500;
oV.height= 500;
alert(oV.videoWidth );
oV.addEventListener(‘ended‘,function(){
alert(123);
},false);
};
</script>
</head>
<body>
<video controls id="v1">
<sourcesrc="Intermission-Walk-in.ogv"></source>
<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
标签：
原文地址：http://blog.csdn.net/u013267266/article/details/51351313
