前端临床手札——在微信播放视频的那些事

某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：

就是图片滚动到最后自动播放视频，播完显示个按钮交互。

然而我真的太天真，微信浏览器怎样会让你这样好过！

问题集中于自动播放视频这块，需求很简单：

1. 自动播放

2. 全屏

3. 不显示工具条

自动播放

一步步来，自动播放这个问题在ios十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于android在微信下和ios一个样。这个问题其实还不算大，有解决方案：

// 点击页面开始偷偷播视频让其加载
var one = document.body.addEventListener('touchstart', function(){
    var _video = document.querySelector('#vidoe');
    _video.play();
    _video.pause();
    document.body.removeEventListener('touchstart', one);
}, false);

// 然后在其他事件或者行为就能播放那个视频了
var _video = document.querySelector('#vidoe');
_video.play();

代码思维很简单就是用户页面肯定会点的，就第一下点击播放视频，这样算作用户行为而视频实际还没播放，之后在其他需要的地方再弹出播放。从设计上需要花点心思来解决这个硬骨头...

全屏 and 不显示工具条

如果你只需要自动播放，那可以停下了，因为下面更坑。

全屏播放so easy！！

加上x5-video-player-type="h5"让video开启同层H5播放器。

然而在ios设备，还得加上iphone-inline-video这个插件，解决不强制全屏播放问题。以下是使用方法：

# main.js
var enableInlineVideo = require('iphone-inline-video');
enableInlineVideo(document.querySelector('#video'));

# index.html
<video src="source.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true"></video>

# index.css
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

最后加上x5-video-player-fullscreen="true"会让视频进入全屏模式，而全屏默认不显示工具条，好解决！:)

<video id="video" src="source.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

注意：如果和自动播放的方案一起用会出现：偷跑视频时黑屏闪烁一下的问题（就是视频全屏了一下...）。然而打算加载后再设置上面属性也会不成功的，会存在视频流错乱问题（提示你加载出错之类的...）

中间有段小插曲本打算使用canvas进行视频渲染，看似可行结果pc端可以，移动端跪地不起。

结论：

1. 自动播放 —— 完全可行

2. 全屏 —— 可行但需考虑设计细节

3. 不显示工具条 —— 别想了，吃力不讨好（然而目前还没有解决方案，如果有请通知博主感谢）

想要模仿的例子(请用微信打开)
视频H5のVideo标签在微信里的坑和技巧
关于如何在微信里面让video不全屏播放。