09、HTML5-音频视频

一、音频和视频

audio音频标签
video视频标签

二、编解码器

音频、视频格式原始文件是非常大的，这就需要添加时进行编码压缩，播放时进行解码;

音频编解码器
  MP3、WAV、OGG Vobis
视频编解码器
  H.264、VP8、OGG Theora

三、媒体元素

src: 指定音频、视频的url
  
controls : 显示或隐藏用户控制界面
 // 添加上controls之后，控制界面就会显示
  
不同浏览器中，控制界面控件都会有所不同。

autoplay : 媒体是否自动播放

loop : 媒体是否循环播放

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;

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。