video标签移动端问题

摘要

随着HTML5时代的到来,flash的时代已经渐渐离我们远去了,这点从很多网站已经全面使用HTML5的播放器和Adobe将动画制作软件Flash改名为Animate中就能看得出来。

说到HTML5,不得不提一词——H5。HTML5的到来火了H5这个词,但是很多人确将这两个词等同起来。从客观角度讲,这两个词并不是一回事。

随着HTML5时代的到来,flash的时代已经渐渐离我们远去了,这点从很多网站已经全面使用HTML5的播放器和Adobe将动画制作软件Flash改名为Animate中就能看得出来。

说到HTML5,不得不提一词——H5。HTML5的到来火了H5这个词,但是很多人确将这两个词等同起来。从客观角度讲,这两个词并不是一回事。

这里有必要讲讲H5的“故事”。微信的出现颠覆了人们对于社交软件的认识,因此,衍生出了许多东西,如微场景。也正是因为微场景的出现,才让H5和HTML5在许多人的心中划上了等于号。

自从H5一词火了以后,笔者找寻良久都未能找寻到一个关于H5相关的定义。偶然一次,笔者在网上看到一个最能诠释H5一词的定义:H5就是那种点进去花我十几M流量,还会不顾场合放歌的微信PPT。

关于H5这个词怎么来的?网上也流传着一个段子:

产品:“我们要做个广告页,能在手机端展示,有各种酷炫效果。”

开发:“原生那个Flash改改就行了。”

产品:“不行!现在iPhone那么多,播放不了Flash!”

开发:“哦,iPhone啊,不用Flash,那按HTML5标准也能做出来。”

产品:“原来还可以用H什么的5做广告页啊!”

产品对其他产品:“刚跟开发沟通过了,iPhone上的广告页可以用H5做的!”

虽然flash已经不能在移动端使用了,但是HTML5中的video标签却没有很好的代替flash。在移动端和video打过交到的人,相信很多人都遇类似的问题:

一、video标签无法在手机上自动播放

移动端的浏览器为了避免浪费用户的网络流量,默认是不允许媒体文件自动播放的。

要想用代码解决这个问题是不现实的,所以只能退而求其次,引导用户手动触发视频的播放。

二、video标签无法在手机上全屏播放

安卓手机上,移动端在播放视频后会被浏览器自带的播放器劫持(某些浏览器不但劫持,而且还会无下限的在视频结尾强推广告)。

原本以为苹果和安卓应该是一样的,结果完全出乎个人意料。在全屏播放方面,苹果做的确实比安卓要好很多。如果我们不对video标签做处理,苹果手机默认也是无法全屏播放的。我们可以在video标签上加一些属性来强制苹果手机全屏播放。对于安卓,此问题笔者暂时无解。

  1. <video src="demo.mpr" webkit-playsinline="" playsinline="" x-webkit-airplay="true" airplay="allow" preload="auto"></video>

三、video标签播放后层级达到最高

安卓手机上,不允许视频上层有东西。

对于播放后的视频,即使我们给父级加了overflow: hidden;也无法改变这一现象。所以,我们能做的就是将原视频的width和height设置为0来解决播放后层级最高的问题,关于这个问题,没有一个非常好的解决方案,至少目前来看是没有的。真切希望有关人员能够解决一下这个问题。

备注:X5内核的浏览器(微信、QQ浏览器)提供了一些属性可以解决不劫持视频的播放和覆盖Dom元素,腾讯命名为同层播放,只针对安卓的X5内核浏览器。X5浏览器播放时会弹出一层覆盖播放,上部会保留退出和分享按钮,下部会有黑边,布局可能和原来的界面有点不一样。因此,需要用户通过订阅x5requestFullScreen和x5cancelFullScreen事件进行布局微调。

四、video如何填充满父级元素

最后,再说一个笔者遇到的诡异现象。如果仅仅想通过设定video的样式为width: 100%; height: 100%;来达到满屏的目的是做不到的。多方查找资料发现<video>属于“替换元素”,类似的元素还有<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。对于这一类元素,有一单独样式适用它们——object-fit。

所以,要想让video元素充满父级需要再多加一条object-fit样式,最终为:width: 100%; height: 100%;object-fit: fill;。

这里笔者对object-fit样式取值做一下介绍:

fill(默认值):将该元素的内容扩大到完全填充针父级容器,将不再受元素内容的宽高比约束。

contain:在保证元素内容宽高比的前提下尽可能填充满父级容器,元素不会超出父级容器。

cover:在保证元素内容宽高比的前提下完全填充满父级容器,元素可能会超出父级容器。

备注:如果你也开发过程中遇到了相同的问题,希望笔者的这篇文章能够帮到你。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: