某天收到旧同事的信息说希望我帮手做一下一个简单的H5,然后我看了看的确很简单:
就是图片滚动到最后自动播放视频,播完显示个按钮交互。
然而我真的太天真,微信浏览器怎样会让你这样好过!
问题集中于自动播放视频这块,需求很简单:
自动播放
全屏
不显示工具条
自动播放
一步步来,自动播放这个问题在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端可以,移动端跪地不起。
结论:
自动播放 —— 完全可行
全屏 —— 可行但需考虑设计细节
不显示工具条 —— 别想了,吃力不讨好(然而目前还没有解决方案,如果有请通知博主感谢)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。