全国服务热线:4008-888-888

技术知识

浅谈html5 video 挪动端填坑记

本文详细介绍了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方式
-->

全自动播发

设定autoplay特性

<video autoplay></video>

挪动访问器中

可是在许多挪动访问器里,全是规定客户的真正实际操作来(touchend、click、doubleclick 或 keydown 恶性事件等规范的恶性事件)开启启用video.play(),才可以全自动播发影音视頻。

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

手机微信中

还可以在  wx.ready()里开启video.play()

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

内联播发

设定特性 webkit-playsinline playsinline

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

在iOS Safari和1些安卓系统的1些访问器下播发视頻的情况下,不可以在h5网页页面中播发视頻,系统软件会全自动对接视頻

假如必须在h5网页页面内播发视頻,必须在视頻标识上再加  webkit-playsinline,在iOS10之后,必须再加playsinline,提议另外再加这两个特性。另外还必须app适用这类方式

webview.allowsInlineMediaPlayback = YES;

ios手Q和手机微信都适用这类方式,可是android 手机微信就挂了

android 手机微信

android手机微信内嵌访问器选用腾迅X5核心,不遵照X5web规范,video强制性全屏便是其1。视頻播发结束后还会出現QQ自身的视頻强烈推荐

听说,其有个白名单,白名单下的视頻資源,就不容易全屏。可是腾迅早已不可以再提升白名单了。尿性,无解。。。。。。

现阶段也有1个处理方法,便是应用h5  canvas 播发 video

canvas 播发视頻

应用canvas 遇到的坑:video 务必加 x5-video-player-type="h5" 特性,不然,在挪动端就会卡死不可以播发视頻,本人觉得是由于视頻被对接的缘故致使。

<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>

最终发现,尽管应用canvas播发视頻,android手机微信中能够屏蔽全屏视頻播发完的强烈推荐视頻。可是还没法严禁视頻播发时 的全屏难题。還是得万恶的白名单。调侃。。。。。。。。。。。。。。。。
更坑爹的是沒有寻找js开启撤出全屏的方式。

ios黑屏难题

ios 在播发视頻时,会出現短暂性的黑屏,随后一切正常显示信息。

处理方式:

在视頻顶层遮盖1个 加上1个div并用1张照片填充,生产制造播发前载入假象。随后监视恶性事件 timeupdate ,视頻播发有画面时移除这个“div块”

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

Media 方式和特性

HTMLVideoElement和HTMLAudioElement 均承继自HTMLMediaElement

// 新闻媒体不正确
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"); //声音更改

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服