浅谈html5 video 挪动端填坑记

<video id="video" 
  style="object-fit:fill" 
  autoplay
  webkit-playsinline 
  playsinline 
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  src="video.mp4" />
</video>
<!--
  object-fit: fill   视頻內容填满全部video器皿
  poster:"img.jpg" 视頻封面
  autoplay： 全自动播发
     auto - 当网页页面载入后加载全部视頻
     meta - 当网页页面载入后只加载元数据信息
     none - 当网页页面载入后不加载视頻

  muted：当设定该特性后，它要求视頻的声频輸出应当被静音

  webkit-playsinline playsinline:   内联播发

  x5-video-player-type="h5" :  开启x5核心H5播发器
  x5-video-player-fullscreen="true"  全屏设定。ture和false的设定会致使合理布局上的不1样
  x5-video-orientation="portraint" ：申明播发器适用的方位，可选值landscape 横屏,portraint竖屏。
                                     默认设置值portraint。不管是直播间還是全屏H51般全是竖屏播发，
                                     可是这个特性必须x5-video-player-type打开H5方式
-->

<video autoplay></video>

 dom.addEventListener('click', function () {
   video.play()
})

wx.ready(function () {
  video.play()
})

<video id="video" webkit-playsinline playsinline /></video>

webview.allowsInlineMediaPlayback = YES;

<div class="wrapper">
  <video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
  <canvas id="canvas"></canvas>
</div>
<script>
  var video = document.querySelector('#video')
  var canvas = document.querySelector('#canvas')
  var wrapper = canvas.parentNode
  var width = wrapper.offsetWidth
  var height = wrapper.offsetHeight
  var ctx = c.getContext('2d')
  var time = null
  canvas.width = width
  canvas.height = height

  canvas.addEventListener('click', function () {
    video.play()
  })

  video.addEventListener('play', function () {
      time = window.setInterval(function () {
        ctx.drawImage(v, 0, 0, width, height);
      }, 20);
  }, false);

  video.addEventListener('pause', function () {
      window.clearInterval(time);
  }, false);

  video.addEventListener('ended', function () {
      window.clearInterval(time);
  }, false);
</script>

video.addEventListener('timeupdate', function(){
  if(video.currentTime > 0.1){
      posterImg.hidden();
  }
})

// 新闻媒体不正确
MediaObj.error; //null:一切正常
MediaObj.error.code; //1.客户停止 2.互联网不正确 3.解码不正确 4.URL失效

//新闻媒体当今情况
MediaObj.currentSrc; //回到当今資源的URL
MediaObj.src = value; //回到或设定当今資源的URL
MediaObj.canPlayType(type); //是不是能播发某种文件格式的資源
MediaObj.networkState; //0.此元素未原始化 1.一切正常但沒有应用互联网 2.正在免费下载数据信息 3.沒有寻找資源
MediaObj.load(); //再次载入src特定的資源
MediaObj.buffered; //回到已缓存地区，TimeRanges
MediaObj.preload; //none:不预载 metadata:预载資源信息内容 auto:

//提前准备情况
MediaObj.readyState;//1:HAVE_NOTHING 
                    //2:HAVE_METADATA 
                   //3.HAVE_CURRENT_DATA 
                  //4.HAVE_FUTURE_DATA 
                 //5.HAVE_ENOUGH_DATA
MediaObj.seeking; //是不是正在seeking

//回放情况
MediaObj.currentTime = value; //当今播发的部位，取值可更改部位
MediaObj.startTime; //1般为0，假如为流新闻媒体或不从0刚开始的資源，则不为0
MediaObj.duration; //当今資源长度 流回到无尽
MediaObj.paused; //是不是中止
MediaObj.defaultPlaybackRate = value;//默认设置的回放速率，能够设定
MediaObj.playbackRate = value;//当今播发速率，设定后立刻更改
MediaObj.played; //回到早已播发的地区，TimeRanges，有关此目标见下文
MediaObj.seekable; //回到能够seek的地区 TimeRanges
MediaObj.ended; //是不是完毕
MediaObj.autoPlay; //是不是全自动播发
MediaObj.loop; //是不是循环系统播发
MediaObj.play(); //播发
MediaObj.pause(); //中止

//视頻操纵
MediaObj.controls;//是不是有默认设置操纵条
MediaObj.volume = value; //声音
MediaObj.muted = value; //静音

//TimeRanges(地区)目标
TimeRanges.length; //地区段数
TimeRanges.start(index) //第index段地区的刚开始部位
TimeRanges.end(index) //第index段地区的完毕部位

//【★★★**有关恶性事件**★★★】
//恶性事件派发
var eventTester = function(e){
    Media.addEventListener(e,function(){
        console.log((new Date()).getTime(),e)
    },false);
}
//恶性事件监视
eventTester("loadstart"); //顾客端刚开始恳求数据信息
eventTester("progress"); //顾客端正在恳求数据信息
eventTester("suspend"); //延迟时间免费下载
eventTester("abort"); //顾客端积极停止免费下载（并不是由于不正确引发）
eventTester("loadstart"); //顾客端刚开始恳求数据信息
eventTester("progress"); //顾客端正在恳求数据信息
eventTester("suspend"); //延迟时间免费下载
eventTester("abort"); //顾客端积极停止免费下载（并不是由于不正确引发），
eventTester("error"); //恳求数据信息时遇到不正确
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay刚开始播发时开启
eventTester("pause"); //pause()开启
eventTester("loadedmetadata"); //取得成功获得資源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等候数据信息，并不是不正确
eventTester("playing"); //刚开始回放
eventTester("canplay"); //能够播发，但半途将会由于载入而中止
eventTester("canplaythrough"); //能够播发，音乐所有载入结束
eventTester("seeking"); //找寻中
eventTester("seeked"); //找寻结束
eventTester("timeupdate"); //播发時间更改
eventTester("ended"); //播发完毕
eventTester("ratechange"); //播发速度更改
eventTester("durationchange"); //資源长度更改
eventTester("volumechange"); //声音更改