TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

H5&C3之音频视频

zyz
2019-04-12
/
0 评论
/
589 阅读
/
正在检测是否收录...
04/12

一、音频和视频

  • 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(iamge, x, y): 将image绘制到x,y处,该方法不会对图片做任何缩放处理;
drawImage(iamge, x, y, width, height): 将image绘制到x,y处,该方法会对图片进行缩放,绘制出来的图片宽度为width,高度为height;

案例: 定制播放器

赞(0)
评论 (0)
本篇文章评论功能已关闭