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

墨蓝 2022-04-27 18:14 195阅读 0赞

相信使用过`<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>`标签在安卓手机和苹果手机下播放时的一个效果(点击视频可以播放)：

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

您的浏览器不支持最新的video播放

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

您的浏览器不支持最新的video播放

### 安卓手机的自带浏览器 ###

您的浏览器不支持最新的video播放

### 苹果手机的自带浏览器 ###

您的浏览器不支持最新的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;
    }
    复制代码

### 层级问题 ###

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

您的浏览器不支持最新的video播放

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

后面我的解决思路是：

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

## 测试机型 ##

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

## 最后 ##

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

好了，本文到此结束，希望对你有帮助 ?

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

## 关注 ##

欢迎大家关注我的公众号`前端帮帮忙`，大家一起学习进步！