H5

09、HTML5-音频视频

2017-06-05  本文已影响103人  EndEvent

一、音频和视频

二、编解码器

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

  MP3、WAV、OGG Vobis
  H.264、VP8、OGG Theora

三、媒体元素

  <audio src="105511007-1.mp3"></audio>
 // 添加上controls之后,控制界面就会显示
  <audio src="105511007-1.mp3" controls></audio>

不同浏览器中,控制界面控件都会有所不同。

<audio src="105511007-1.mp3" autoplay></audio>
<audio src="105511007-1.mp3" loop></audio>
  // 获取
  console.log(audio.currentTime);
  // 设置播放位置
  audio.currentTime = 60;
  console.log(audio.duration);
  // 获取音量
  console.log(audio.volume);   

  // 设置0,即静音
  audio.volume = 0;
  // 获取是否静音
  console.log(audio.muted);  

  // 设置静音
  audio.muted = true;
  audio.play();
  audio.pause();
  // 改变数据源
  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('正在播放..');
   });

五、视频额外特性

  video.poster = 'test.jpg';
  video.width = 320;
  video.height = 568;

案例: 视频和canvas结合
drawImage(image, x, y): 将image绘制到x,y处,该方法不会对图片做任何缩放处理;
drawImage(image, x, y, width, height): 将image绘制到x,y处,该方法会对图片进行缩放,绘制出来的图片宽度为width,高度为height;

上一篇 下一篇

猜你喜欢

热点阅读