html5 挪动端视頻video的android适配(除去播发控制、

日期:2021-02-22 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

android下html5的视頻播发1直是前端开发适配的重灾区,各种各样体验差,被诟病已久。但以前的故宫穿越H5,和吴亦凡参军H5,运用的视頻技术性,貌似又给人1种新外貌。

前段時间做某新项目,正好也是1个相近视頻全屏的,下面跟大伙儿共享下亲身经历的坑和填坑的方法。

ios端难题实际上没甚么,基础都在android端,基础每个带有视頻的新项目都会遇到的,自然有独特要求的造成的状况另说了就,难题关键有几个层面:

  • 全屏解决;
  • 全自动播发;
  • 播发操纵;
  • 掩藏播发控制;

video全屏的解决

这个实际上不难,只需在video标识加个webkit-playsinline特性便可,这个特性基础上在根据webkit核心的挪动端全是没难题的,此全屏非彼全屏,它是在访问器视窗内的全屏,其实不是占居全部手机上的全屏,自然大家做web端必须的便是在document的body内的视窗范畴的全屏。

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

在ios下,视頻被嵌入后,新闻媒体的元数据信息载入进行后,会以全屏的方式显示信息出来,或加个poster,能够看到画面。但在android下,大部分机子是无法显示视頻画面的,要不便是显示信息1个黑色的还并不是全屏的播发控制,即便及加个poster封面也不济因而。由于poster在android适配的其实不好,比不上在视頻顶层加个div浪费照片,这个较为好的解决方法应当是:视頻上加1层div做封面,因为android不容许视頻顶层有物品,因此最先将视頻设为的width:1px,当播发后,顶层的封面remove掉,另外width:100%或你要想的宽度。

video的全自动播发

这个的话就很少说了,坚信大伙儿跟我1样,尝试找寻android下,网页页面载入结束便可以全自动播发,但实际是残暴的,android下是不容许全自动播发的,即便你用了video.play(),也是不好的。务必有效户的积极开启,例如触碰了显示屏,有click或touch恶性事件造成。不知道之后android会不容易改善,但最少现阶段看来是不好的。较为的好的方法是,正确引导客户开启,滑屏或touch的个人行为,随后启用video.play()播发,给客户1个全自动播发的幻觉。

video播发的操纵

针对video或audio等新闻媒体元素,有1些方式,常见的有play(),pause();也是有1些恶性事件,如'loadstart','canplay','canplaythrough','ended','timeupdate'.....这些。

在挪动端有1些坑必须留意,不必随便应用新闻媒体元素的除'ended','timeupdate'之外event恶性事件,在不一样的机子上将会有不一样的状况造成,比如:
ios下监视'canplay'和'canplaythrough'(是不是已缓存了充足的数据信息能够顺畅播发),当载入时是不容易开启的,即便preload="auto"也没用,但在pc的chrome调节器下和android下,是会在载入环节就开启。ios必须播发后才会开启。
总而言之便是如今的视頻规范还不尽健全,有许多坑要留意,要应用前最好是自身亲测1遍。

有关操纵的难题还想说1点便是android在播发视頻时会有个控制原始化的全过程,在全屏视頻想掩藏成非视頻时,是大家很不想看到的,我的处理思路是这样:
在大家必须播发时提早原始化它,即必须播发的時间前先设width:1px;随后play()1下,使视頻早已播发原始化。随后再必须播发的情况下再度play()时就不容易造成,控制拉伸的状况了。

“除去”android下的播发控制条

重头戏来了,坚信这个这个难题已困扰无数的前端开发开发设计人员,再寻找这个难题的处理方式时,基本上全部的文章内容全是告知你android下,播发器的控制是去不上的。实际上好像的确是这样的,但你看了故宫穿越H5,和吴1凡那个H5后,会发现,在android下,也是沒有操纵条的。最开始看到那些H5视頻我最先并沒有去看她们的內容多么的新颖,散播量多么的广,我是第1時间检测了android下的适配难题,发现并沒有出現操纵条。在我科学研究半天未果时,在1篇技术性帖中看到说:因是腾迅自身的新项目,手机微信是腾迅自身的,她们在访问器里做了1些配备,对旗下出品的H5有一定的“优惠待遇”,才可以保证视頻的圆满“乔装打扮”。

上面的说法我并沒有真实核实过,但仿佛是这么回事,十分荣幸我做的那个视頻新项目也是腾迅的,实际上是还有机会能够向她们确认1下以上说法的,但即便是这样的,也仅有腾迅的新项目有这样的处理方法,针对众多的开发设计者来讲好像并太不公平公正,我尝试寻找1种处理除去播发控制的处理计划方案,下面是我花了许多思绪寻找的1种处理方法,看似很简易也不那末伟岸尚,但的确处理了难题,跟大伙儿共享:

我这里只看android的状况,ios基础没甚么难题,就忽视啦。
检测机android版本号:5.1
最先大家将那个H5视頻详细地址嵌入自身的网页页面,你会发现的确播发器出現了。以下

如何办呢,并不是腾迅自身的新项目就没法了嘛?再我搜了N多材料未果后,发现了1个细节,操纵条自始至终是最正下方的,可不能以让视頻的规格变大些,将操纵条顶到访问对话框外面,就看不见了嘛,因而我将视頻宽高变大到120%-----控制条奇异的‘消退’了(实际上是顶到视窗外面了),欣喜万分啊。

实际思路和完成以下:

html中将video标识外包1层,

 <div class="videobox">
        <video id="mainvideo" webkit-playsinline="true" src="http://7xvl2z.com1.z0.glb.clouddn.com/nigg2.mp4"></video>
    </div>

原始款式表以下:

html,body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none; 
  user-select: none;
  overflow: hidden;
}

.videobox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

video {width: 1px;display: blcok;}

/*
注:html,body里的overflow:hidden,十分关键,不可以省。
由于手机微信android的播发器是摆脱DOM构造的,也不容易回应click、touch等恶性事件。
假如视頻规格大了,会造成翻转条,务必在html和body加overflow:hidden,
在videobox加没用的。
*/

当视頻要播发时更改video的宽度(高宽比会等比放缩,即便自定高宽比也是没用的,会被忽视)

  var video = document.querySelector('#mainvideo');
  var videobox = document.querySelector('.videobox');

  //播发时更改外层包裹的宽度,使video宽度提升,
  //相应高宽比也提升了,播发器控制被挤下去,相互配合overflow:hidden
  //控制看看不到也触碰不到了
  var setVideoStyle = function (){
    videobox.style.width = '120%';
    videobox.style.left = '⑴0%';
    video.style.width = '100%';
  }

自然上面这样写参杂了1些要求逻辑性,还可以立即款式表就width:120%,或更大;这个依据自身的必须来,但基础思路便是将播发器控制顶出视窗以外,做到1种‘除去’、‘消退’的实际效果。连‘小窗’字样也被顶出去了,用过android或检测过的同学都了解点了小窗后会如何....(原版的即便去掉了播发器,但小窗字样还在,不可以算彻底的掩藏播发控制吧)

相应造成的1些难题的处理方法:

1,视頻被变大了,画面会被截掉1一部分如何办?

这个能够在视頻輸出的情况下两侧和下边留1些留白,即留白能够没用画面黑色底,但又属于视頻规格的1一部分,放视頻变大后,将行为主体画面置满视窗,被挤到外面全是留白的便可。

2,视頻播发结束后会正中间全自动出現播发控制按钮

假如的确不想在播发完是出現1个按钮,哪怕仅有零点几秒,就把视頻remove掉,可使用timeupdate监视视頻播发,用video.duration-video.currentTime的差值分辨是不是快要完毕了,在完毕前零点几秒提早remove掉。

3,如果并不是全屏视頻如何搞?

能够,思路是1样的,将视頻控制顶外出层的包裹层,运用overflow:hidden。只是全屏的外层包裹是body罢了。

哦了,终究能够搞1个全屏视頻掩藏的物品了。

2017-03⑵1补
伴随着時间的变化,机器设备和技术性的升级,本着不坑害同胞的心,承担责任升级下還是必须的
我们還是从上面的4个关键点来讲ios和android吧

  • 全屏解决;
  • 全自动播发;
  • 播发操纵;
  • 掩藏播发控制;

填补--全屏解决

ios加playsinline特性,以前只带webkit前缀的在ios10之后,会吊起系统软件自带播发器,两个特性都再加基础ios端都可以以确保内敛到访问器webview里边了。假如仍有某些版本号的ios会吊起播发器,还能够引入1个库iphone-inline-video(实际用法很简易看它github,这里不详细介绍了,只需加js1句话,css加点),
github详细地址是https://github.com/fregante/iphone-inline-video,再加playsinline webkit-playsinline这两个特性和这个库基础能够确保ios端沒有难题了(但是亲测,只加这两个特性不引进库仿佛也是ok的,至今沒有在ios端手机微信沒有出現难题,假如你要适配uc或qq的访问器提议带上这个库),
最终详细介绍个新的x5-video-player-type="h5"特性,腾迅x5核心系的android手机微信和手Q内嵌访问器用的访问器webview的核心,应用这个特性在手机微信中视頻会有不一样的主要表现,会展现全屏情况,貌似播发控制剥去了,最少加了这个特性后视頻顶层能够有别的dom元素出現了(非腾迅白名单机版制的1种解决对策),

<video id="mainvideo" src="test.mp4" playsinline webkit-playsinline></video>

填补--全自动播发

android自始至终不可以全自动播发,很少说。值得1提的是经测如今ios10后版本号的safari和手机微信都不让视頻全自动播发了(顺便声频也不可以全自动播发了),但手机微信出示了1个恶性事件WeixinJSBridgeReady,在手机微信嵌入webview全局性的这个恶性事件开启后,视頻仍能够全自动播发,这个应当是如今在ios端手机微信的视頻全自动播发的较为可靠的方法,别的如手q或别的访问器,提议就正确引导客户考虑触摸屏的个人行为实际操作考虑较为好。

//还可以在这个恶性事件开启后播发1次随后中止(这样之后视頻会处在载入情况,为后边的顺畅播发做提前准备)
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

填补--播发操纵

有关操纵,这里仅填补1点吧,便是当第1次播发视頻的情况下ios端,假如互联网慢,视頻从刚开始播到能呈现画面会有短暂性的黑屏(解决视頻源数据信息的時间),以便防止这个黑屏,能够在视頻上加个div浮层(能够1个假的视頻第1帧),随后用timeupdate方式监视,视屏播发及有画面的情况下再移除浮层

video.addEventListener('timeupdate',function (){
    //当视頻的currentTime超过0.1时表明黑屏時间已过,已有视頻画面,能够移除浮层(.pagestart的div元素)
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

填补--掩藏播发控制

听说腾迅的android精英团队的x5核心精英团队放宽了视頻播发的限定,视頻不1定启用它们那个备受诟病的视頻播发器了,x5-video-player-type="h5"特性这个特性仿佛就有点那个意思,尽管体验還是有点...(导航栏栏也会清除)但最少播发器控制沒有了,顶层能够浮div或别的元素了,这个還是值得1提。
也有1点值得说的是,带播发器控制的掩藏,

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

例如这个videobox在android下掩藏,只用display:none貌似還是不好的,但加个z-index:⑴,设定成⑴便可以做到掩藏播发器控制的目地了。这个经测能用且功能强大,能够1试。

到此这篇有关html5 挪动端视頻video的android适配(除去播发控制、全屏)的文章内容就详细介绍到这了,更多有关html5 android适配视頻內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!