09、HTML5-音频视频

一、音频和视频

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;