【前端帮帮忙】第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）来测试的，其余手机型号未测试，因此仅供参考了。

最后

感谢耐心读完，若是还有什么疑问或者建议，能够多多交流。

好了，本文到此结束，但愿对你有帮助 🙂

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

关注

欢迎你们关注个人公众号前端帮帮忙，你们一块儿学习进步！