video

1. 格式类型 mp4 , ogv , webm

2. 属性 src controls loop muted , autoplay,witdht, height ,poster , preload
   (1)谷歌浏览器自动播放，需要设置为静音才行

   (2)poster:视频刚加载没有播放之前才显示

   (3)preload:"auto"

3. 兼容 <video> <source src="mp4"></source> <source src="ogv"></source> </video>

4. api

   pause
   duration
   currentTime 设置返回当前视频的长度（处理快进之类，拖动条）
   src 设置返回但却视频的来源
   currentSrc 只有视频加载后才能返回
   volumn 设置返回当前视频的音量 0-1
   controls 设置是否显示控件
   muted 是否静音
   networkState 当前网络状态
   ended 返回视频是否播放结束
   loop 设置或返回
   playbackRate 设置返回视频速度
   readyStata 视频当前就绪状态
   load video重新加载一下,或加载新的 src

5. 事件

   addEventListener('timeupdata',) 视频播放位置更改事件
   seeked (防抖处理)   onseeked
   seeking        onseeking
   volumnchange    onvolumnchange
   requestFullscreen   兼容 wibkitRequestFullscreen() //谷歌
                           mozRequstFullScreen() // 火狐 s 大写
                       全屏时，控件会显示出来
   canplay 视频已经准备好开始播放

6. 手写控件 拖拽声音进度条：

     voiceBtn.onmousedown=e=>{
      val l=t.clientX-this.offsetLeft
      //注意用 document来绑定事件
      document.onmousemove=function(e){ 
        var needx=e.clientX -l
        needx=needx < -2.5 ? -2.5: needx
        needx=needx > maxX ? maxX : needx
        voiceBtn.style.left=needx + 'px'
        video.volumn = needx / vDragNode.parentNode.offsetWidth
      }
      
      document.onmouseup=function(e){
        document.onmousemove=document.onmouseup=null //解绑事件
      }
   }

7. 控件三方库 Video.js 库 github.com/videojs/vid…

音频 audio

1. 音频格式 mp3 wav ogg

2. audio 标签

3. Audio 对象

   dom= new Audio()（文档对象之外） , 等同于 html 上写一个 audio 标签 无法自动播放，可以静音自动播放，（或者事件页面交互后播放）