一、音频和视频
- audio音频标签
- video视频标签
二、编解码器
音频、视频格式原始文件是非常大的，这就需要添加时进行编码压缩，播放时进行解码;
- 音频编解码器
MP3、WAV、OGG Vobis
- 视频编解码器
H.264、VP8、OGG Theora
三、媒体元素
- src: 指定音频、视频的url
<audio src="105511007-1.mp3"></audio>
- controls : 显示或隐藏用户控制界面
// 添加上controls之后，控制界面就会显示
<audio src="105511007-1.mp3" controls></audio>
不同浏览器中，控制界面控件都会有所不同。
- autoplay : 媒体是否自动播放
<audio src="105511007-1.mp3" autoplay></audio>
- loop : 媒体是否循环播放
<audio src="105511007-1.mp3" loop></audio>
- currentTime : 开始到播放现在所用的时间
// 获取
console.log(audio.currentTime);
// 设置播放位置
audio.currentTime = 60;
- duration : 媒体总时间(只读)
console.log(audio.duration);
- volume : 0.0-1.0的音量相对值
// 获取音量
console.log(audio.volume);
// 设置0，即静音
audio.volume = 0;
- muted : 是否静音
// 获取是否静音
console.log(audio.muted);
// 设置静音
audio.muted = true;
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
play() : 媒体播放
audio.play();
- pause() : 媒体暂停
audio.pause();
- load() : 重新加载媒体
// 改变数据源
audio.src = '123.mp3';
// 数据源改变后，重新加载
audio.load();
四、媒体事件
loadstart、progress、suspend、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、ratechange、durationchange、volumechange
// 播放结束事件
video.addEventListener('ended', function(){ // 结束时
alert('切换视频....');
});
// 播放事件
audio.addEventListener('play', function(){
alert('正在播放..');
});
五、视频额外特性
- poster : 视频播放前的预览图片
video.poster = 'test.jpg';
- width、height : 设置视频的尺寸
video.width = 320;
video.height = 568;
- videoWidth、 videoHeight : 视频的实际尺寸(只读)
案例: 视频和canvas结合
drawImage(image, x, y): 将image绘制到x,y处，该方法不会对图片做任何缩放处理；
drawImage(image, x, y, width, height): 将image绘制到x,y处，该方法会对图片进行缩放，绘制出来的图片宽度为width，高度为height;
