H5中的视频处理与音频处理

一、如何使用HTML实现视频处理

1. video标签

        如果当前浏览器不支持video，可以在veido里面编写提示内容
        src - 引入视频文件的路径
        autoplay - 自动播放视频
   

2. souce元素

       <vedio>
          <source src="一种视频格式"/>
          <source src="一种视频格式"/>
          <source src="一种视频格式"/>
       </vedio>
   

3. video支持的视频格式

       MP4 - 目前比较主流
       OGG -  多用于移动端
       WebM - 目前唯一支持超高清格式
           在HTML页面中支持超高清格式HTML5
           由Google公司推出
   

4. video元素的属性

      src - 视频路径
      autoplay - 自动播放
      controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值
      loop - 视频的循环播放
      poster属性 - 在视频播放之前，显示一张图片
      width/height - 设置显示视频的宽度和高度
   
      preload - 预加载
         auto-(默认值)自动加载
         none-不加载
         metadata-只加载视频的基本信息(不含视频)
   

5. 扩展- Web前端 - 移动端

      移动智能终端
         iPhone 
         Android 
         Window Mobile 
         BlackBerry
         WebOS - 全键盘+触摸屏
         塞班 - 诺基亚
         MeeGo
   
      移动跨平台 - HTML/CSS/JAVASCRIPT
   
         一次编写，到处运行(phoneGap)
   

二、视频处理

1. 方法

       play() - 播放视频
       pause() - 暂停视频
       load() - 重新加载音频/视频元素
       canPlayType() - 判断当前浏览器是否支持指定视频格式
   

2. 事件

        onplay - 当视频开始播放时调用
        onpause - 当视频暂停时触发
        onended - 当视频结束时被触发
        onerror - 当视频错误时被触发
        oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件
        oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件
        onprogress - 用于更新媒体的下载进度，会周期性的触发
   

3. 属性

        paused - 表示判断当前是否暂停，true表示暂停
        ended - 表示判断当前视频是否播放完毕，true表示播放完毕
        duration - 表示当前视频的时长,单位为s
        currentTime - 表示当前视频播放的位置
   

4. video元素

    当video视频全屏时，浏览器会把video放到最前端，图片是有显示的，但被视频覆盖了
    利用video事件完成广告效果
       bug: 不能全屏
       解决方案：
   
         等到HTML5更新
         使用video元素提供的高级编程自己实现
         使用目前封装好的video的JS库 video.js
   

播放带有字幕的视频：

    <video width="320" height="240" controls="controls">
      <source src="forrest_gump.mp4" type="video/mp4" />
      <source src="forrest_gump.ogg" type="video/ogg" />
      <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
    //可切换中英文字幕kind="captions"
      <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
    </video>  

三、音频处理

1. audio元素

   第一种：只支持一种音频格式

      <audio src="音频文件路径"></audio>
   

   第二种： 同时引入多个音频格式

      <audio>
        <source src="一种音频格式">
        <source src="一种音频格式">
        <source src="一种音频格式">
      </audio>
   

2. audio元素支持的音频格式

         MP3 - 目前最主流
         OGG
         WAV