微信号:JavaScriptcn

介绍:面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享.

video 标签沉浸式播放解决方案

2018-08-26 23:42 JavaScript

“沉浸播放式”这个概念是我从Android开发里面的沉浸式引申过来的一个概念,沉浸式其实就是隐藏页面顶部的status bar和底部的navigation bar之后呈现出来的页面,一般用户很容易把沉浸式状态栏和透明化状态栏混为一谈,他们的区别如下:

沉浸式状态栏

透明化状态栏

那么回到前端开发,让我们看一下如何让video标签呈现这种沉浸式的播放效果,平常我们使用video标签都是这样的:

 
           
  1. <div id="app">

  2.  <video

  3.    id="videos"

  4.    playsinline="true"

  5.    webkit-playsinline="true" /*IOS播放视频会自动调用原生播放器全屏播放,这里使用这个属性让IOS内播放视频的时候使用inline模式,同时我们设置宽高等于屏幕宽高来实现IOS下的全屏播放*/

  6.    x5-video-orientation="portraint"

  7.    preload="auto"

  8.    style="width: 100%;height: 100%"

  9.  >

  10.    <source src="//gw.alicdn.com/bao/uploaded/TB1YKBlb_ZRMeJjSsppXXXrEpXa.mp4" type="video/mp4">

  11.  </video>

  12. </div>

正常情况下我们要做竖版视频,视频的比例都是16:9,也就是高/宽约等于1.78,这里用到的测试视频也是16:9的,而且默认情况下video的object-fit属性的值是contain,也就是保持长宽比,我们先看下不做处理在iphone6/7/8下的表现情况:

在iphone6/7/8下的表现情况

看起来比较完美,因为这几款手机分辨率都是16:9的,视频维持屏幕大小完全没有问题,接下来看一下分辨率不是16:9的机型,比较典型的就是iphoneX,面向老板开发的同学可能对适配这款机型颇有怨言:

iphoneX下的表现情况

有人会觉得奇怪为什么我们设置了video的宽高都是百分百上下还漏出了两个白条,这里其实是object-fit这个属性在作怪,既然默认的是contain,我们就改为fill吧,再看一下效果:

object-fit:fill

这样看起来没问题,但是你觉得产品小姐姐会这么轻易放过你吗?too navie,你看我们正常16:9的视频在iphoneX这种18:9的屏幕上是有形变的,而且市面上这么多分辨率不同的设备,如果要追求不同的手机上有最接近的用户体验这么做肯定是不行的,有人可能会提到object-fit中的cover属性,没错,这个属性可以让我们的视频等比例缩放,如果宽高不匹配会对处理对象做裁剪操作,来我们看一下现在在微信里面的效果:

微信里的效果

其他效果都蛮好,你会发现右上角有个可恶的全屏,这个全屏按钮是微信的x5内核自带的,没法去除,这个有很多人给腾讯x5开发团队那边提过issue,但是暂时没有办法处理,我后续会提到一个另辟蹊径的方案,先回到这里,点了这个全屏按钮之后会进入微信的全屏播放模式,而且放完之后会出现一堆广告列表,这都是我们不想看到了,其次如果我们的产品需求不单单是全屏播放,还想在视频上面放一些交互按钮之类的,这种方式就做不到,因为video是在最上一级的,但是两种方式例外,一个是微信把你们的域名加入白名单,这种可以在Android手机的video上随意放置dom元素,IOS本身没有这个限制,另一种更为通用的方式是用微信x5内核的同层播放模式,这种模式有两种好处:

  • 去除了右上角讨厌的”全屏”按钮

  • 真正实现了x5内核下的沉浸式播放,我们看到目前的实现在微信上还是带有浏览器的titleBar的 在x5内核的环境下实现同层播放很简单,只需要在video上添加这么两行属性:


 
           
  1. x5-video-player-type="h5"

  2. x5-video-player-fullscreen="true"

再看一下这个时候的效果:

同层播放模式下的效果

确实是真正意义上的沉浸式播放,如果你的app里面webview用的也是x5内核那么这个页面也能在app上达到同样的效果,但是这种同层播放依然有无法解决的问题,首先这个全屏模式会重新计算宽高,触发视口大小变化,也就是说用户视觉上会有一个视口变化的过程,其次,同层播放模式虽然没有了”全屏”按钮,但是左上角的按钮用于退出沉浸式全屏,右上角的按钮点开是分享,分享的内容不可定制,固定位当前页面的title+url的组合,如果你对页面的定制化要求比较高的话,我这里有一个备选的方案,那就是放弃同层播放模式,当然这个前提是你不需要在video页面上做一些交互操作,或者说你的域名处于微信白名单下,当我们在非沉浸式下又想要打到等比例缩放视频的效果,同时我们还要去除x5自带的”全屏”按钮,最好的方式就是动态去计算视频的宽高,把视频撑大,把”全屏”按钮撑出浏览器页面,这样基本就能达到我们的目的了,这里以16:9的标准为例:

 
           
  1. this.$nextTick(() => {

  2.      // 动态处理video标签宽高适配

  3.      const video = this.$refs.video

  4.      const ratio = Math.fround(document.documentElement.clientHeight / document.documentElement.clientWidth)

  5.      if (ratio >= 1.78) {

  6.        // 竖屏

  7.        video.height = document.documentElement.clientHeight + 100

  8.        video.width = Math.floor(video.clientHeight * 0.572)

  9.        const winW = document.documentElement.clientWidth

  10.        video.style.left = (winW - video.width) / 2 + 'px'

  11.      } else {

  12.        // 宽屏

  13.        video.width = document.documentElement.clientWidth + 100

  14.        video.height = Math.floor(video.width * 1.78)

  15.        const winH = document.documentElement.clientHeight

  16.        video.style.top = (winH - video.height) / 2 + 'px'

  17.      }

  18.    })

讲解下思路,16:9的视频也就是高宽比差不多是1.78,那么大于这个比例的就是类似于iphoneX的长屏幕类型的手机,对于这种手机我们要做等比缩放适配的话就以手机的长为标准,先让视频的长度等于手机的长度,这里我加上的100px可以理解为上下在加上50px,目的就是为了把视频长度拉大,让”全屏”按钮消失在视线内,实际这个值可以自己尝试修改,让后宽就是此时高的1/78倍,然后使用绝对布局去设置视频的左边距,就可以达到等比缩放的效果,同理可以理解处理宽屏手机的代码部分,当然,应该还有更完美的方案,可以在评论区留言探讨~


作者:李牧羊

https://www.limuyang.cc/2018/07/22/video标签沉浸式播放解决方案/


 
JavaScript 更多文章 记一次凉凉的小米前端面试 新鲜出炉的8月前端面试题 函数柯里化(Currying)小实践 我是怎么把一个项目带崩的 BAT小程序暗战,前端工程师或成最大赢家
猜您喜欢 程序员的绩效之谜 三天搞定Python基础功,Day 3统计入门篇 干货丨解密卷积神经网络体系结构(经典长文,值得收藏) 技术人感恩节的礼物 请帮我把马赛克p掉,我想看后面的图像…