【前端帮帮忙】第6期 使用video标签需要注意的一些问题

相信使用过<video>标签的都知道,<video>标签在pc端跟手机端显示的样式并不一样,而且还有个很蛋疼的就是微信中内置的浏览器,播放的时候会自动全屏问题。

接下来我们通过例子来分析下使用过程中可能碰到的一些问题,供大家参考。

示例代码

这是代码,只加了controls="controls"显示播放控制条,为了保持视频宽高比例,所以<video>外层套了一个div。

<div class="mod-video-container">
  <video class="mod-video-ele" controls="controls">
    <source src="https://cloud.video.taobao.com/play/u/2616970884/p/1/e/6/t/1/50067740635.mp4" type="video/mp4">
    您的浏览器不支持最新的video播放
  </video>
</div>
.mod-video-container {
  position: relative;
  padding-top: 56.25%;
  background: #000;
}

.mod-video-ele {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

各个端的表现

我们先来看下<video>标签在各个端的表现(未播放视频时默认的效果):

在谷歌模拟器下的效果

安卓手机的微信内置浏览器

苹果手机的微信内置浏览器

安卓手机的自带浏览器

苹果手机的自带浏览器

问题

通过上面的测试,我们发现几个问题:

  1. 安卓中会默认显示播放器的控制条,说实话真不好看,介意的可以把controls属性去掉,然后自定义控制条的样式
  2. 安卓跟苹果默认显示的播放按钮样式也是不一样
  3. 在模拟器中,视频未播放时,会默认以第一帧作为封面图,比较好看,在真实的手机中,不管是安卓还是苹果,都是黑色背景

那如果我们想要设置一张默认的封面图,怎么办?可以给<video>标签加上poster属性,比如:

<video poster="../images/poster.jpg"></video>

这时候,我们发现封面图有了,但是封面图并没有铺满显示,而是居中了,我们可以给<video>标签添加样式:

video {
  object-fit: cover;
}

没加之前的效果:

加上后的效果:

各个端的表现(带视频)

接下来,我们再来看下<video>标签在安卓手机和苹果手机下播放时的一个效果(点击视频可以播放):

安卓手机的微信内置浏览器

苹果手机的微信内置浏览器

安卓手机的自带浏览器

苹果手机的自带浏览器

问题

通过上面的测试,我们可以总结出:

  1. 微信内置浏览器播放的时候,会自动全屏,播放结束的时候还不会自动关掉,还会推荐一些腾讯自带的其他视频
  2. 苹果手机微信内置浏览器跟自带的浏览器播放效果一致,算是个好事
  3. 安卓手机自带的浏览器播放时不会自动全屏

解决方案

如何解决自动全屏的问题:

经测试

苹果手机:给<video>标签加上playsinline属性即可解决,安卓无效,以防万一可以把webkit-playsinline属性也加上

安卓手机:给<video>标签加上x5-playsinline属性就可以解决

最终代码

<div class="mod-video-container">
  <video class="mod-video-ele" controls="controls" playsinline webkit-playsinline x5-playsinline poster="images/poster.jpg">
    <source src="https://cloud.video.taobao.com/play/u/2616970884/p/1/e/6/t/1/50067740635.mp4" type="video/mp4">
    您的浏览器不支持最新的video播放
  </video>
</div>
.mod-video-container {
  position: relative;
  padding-top: 56.25%;
  background: #000;
}

.mod-video-ele {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

层级问题

后面在做商品详情页的视频跟图片切换的时候,又碰到了个很麻烦的问题,就是在安卓手机下,不管是微信内置的浏览器还是自带的浏览器,当你点击视频播放后,该视频就会始终显示在最上层,播放结束后也是在最上层,这时候假如我们有在视频的容器中放一些其他元素的话,都会被盖住了,就点击不到,可以看下我录制的视频感受一下:

可以看到,本来在视频的上层,还有两个页签(商品、详情),跟(视频、图片)的切换功能,当点击播放视频后,都被盖住了。

后面我的解决思路是:

  1. 默认把<video>标签隐藏起来
  2. 自定义封面图跟播放按钮的样式
  3. 点击自定义播放按钮的时候,<video>标签显示,自定义的封面图隐藏
  4. 监听<video>标签播放结束后的事件ended,自定义封面显示,<video>标签隐藏

测试机型

本文章的例子都是基于安卓手机(版本:8.0.0),苹果手机(iPhone 6 Plus/IOS 12.1.3)来测试的,其他手机型号未测试,所以仅供参考了。

最后

感谢耐心读完,如果还有什么疑问或者建议,可以多多交流。

好了,本文到此结束,希望对你有帮助 🙂

原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

关注

本文章首发在我的公众号“前端帮帮忙”,感谢关注,大家一起学习进步!