Android 微信 X5 浏览器与 video

iOS 微信浏览器是 Chrome 内核，Android 微信浏览器是 X5 内核。

在微信 X5 浏览器中的问题

0.7 倍 1.0 倍 1.2 倍 1.5 倍 2.0 倍

• controls 无法隐藏
• 不能自动播放（autoplay 无效）
• 播放时自动全屏

隐藏控件

因为不管 video 是否去掉了 controls 属性，视频都会显示控件，就只有用 css 隐藏掉控件。
一开始时，是设置 css：

video::-webkit-media-controls-enclosure {
  display: none !important;
}

但是出现了2中情况：

1. 情况A：有些手机的微信浏览器会隐藏所有控件，只显示一个居中的播放按钮
2. 情况B：有些手机上则隐藏了包括播放按钮在内的所有控件，导致无法播放

通过在 Chrome 上设置 setting -> Preferences -> Elements 勾选 “Show user agent shadow DOM”，查看

video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-timeline {
  display: none !important;
}

隐藏具体的控件：当前时间、剩余时间、进度条。
则上述情况变为：

1. 情况A的手机的微信浏览器会显示一个居中的播放按钮，同时下方也会有个小的播放按钮（类似视频网站视频暂停时的样式）
2. 情况B的手机的微信浏览器只会显示下方的小的播放按钮
3. 情况A和B都会显示声音调整和全屏控件（因为没有隐藏）

自动播放

微信不允许自动播放视频，必须通过用户交互才能播放。
iOS 中可以使用 js 播放视频（video.play()），但是 Android 中目前没有好的解决方法。

内嵌播放（不要自动全屏）

<video
    class="video-source"
    width="100%"
    height="240px"  /*如果有封面，请设置高度*/
    controls  /*这个属性规定浏览器为该视频提供播放控件*/  
    style="object-fit:fill"  /*加这个style是用于解决 Android / web 的视频在微信里的上下黑边问题*/
    webkit-playsinline="true"  /*这个属性是用于小窗内播放，而不是全屏播放*/  
    x-webkit-airplay="true"  /*支持ios的AirPlay功能*/ 
    playsinline="true"  /*支持小窗内播放*/ 
    x5-video-player-type="h5" /*启用H5播放器,是微信Android特性*/
    x5-video-orientation="h5" /*播放器的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
    x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
    preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
>
  <source src="">
</video>

video.js

video.js 自定义了播放控件，可以实现在不同手机上都统一显示同一个样式（例如播放按钮），可以播放直播视频（<source src="xxx.m3u8" type="application/x-mpegURL">)

videojs('videoId', {
  autoplay: true,
  controlBar: {
    progressControl: false,
    currentTimeDisplay: false,
    timeDivider: false,
    durationDisplay: false,
    remainingTimeDisplay: false,
  }
}, function () {
  this.play()
  .then(() => {
    // play success
  })
  .catch( err => {
    // auto play fail
  });
});