某天收到旧同事的信息说希望我帮手做一下一个简单的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不全屏播放。


帕奇式
924 声望71 粉丝

设计和管理是毕生的课题👨‍💻