把视频嵌入到网站很厉害？但是我试过真的很难搞。我这几天尝试了一下，今天就这里说说我在iPhone和安卓手机遇到的困扰和解决办法，希望对想要试试的朋友有帮助
iOS上的全屏陷阱
哥们儿，看视频时手机突然变小，就跟被锁住似的怎么办？别慌，我来帮你搞定。你只需要给视频加点属性：`webkit-playsinline=”true”`和`playsinline=”true”`，这下它就老老实实待着不动。不过得提醒你，这个办法在微信里可不管用。那咋办？给你推荐个超牛的插件，就是‘iphone-inline-video’，保证让你的视频不再乱跑。
Android的推荐视频烦恼
换个安卓手机看看，这个问题真的让人受不了。看视频时老是会跳出来一堆推荐视频，真烦！有时候真的只想赶快关闭界面。我记得以前无论是iOS还是安卓系统，视频都是放在网页最上方的，其它东西怎么也挡不住。但现在iOS已经解决了这个问题，安卓却还没动静。其实，只需要学会使用腾讯的x5内核里的“同层播放器”功能，再加上那个特别的video元素，就能防止视频被挡住了。
x5-video-player-type="h5" 可以开启同层播放器，来避免播放后显示推荐视频的问题。 x5-video-player-fullscreen="true" //视频全屏播放 x5-video-orientation="portrait"//视频竖屏模式播放
视频尺寸和布局的调整
哥们儿，拍视频就用iPhone5到iPhone7的界面呗，把宽度调成100%，保证画面铺满屏幕不缩水。如果还有问题的话，检查下那个叫`object-fit`的东西是不是要改改看。顺便给你说哈子，iOS里头的视频音频可不会自己动起来，得咱们手动点开始或停止。用JavaScript看着啥时候点播或者暂停，这样视频就能按照命令执行。
JavaScript控制播放
var isStop = false;
videoElem.on('timeupdate', function () {
var curTime = parseInt(videoElem[0].currentTime);
if (curTime == 152) {//该时间点展示交互蒙层
$('.js_first_stop').removeClass('hide');
} else if (curTime > 152 && curTime == 153) {
if (!isStop) {//解决ios暂停后再次点击播放不了问题，因为该处触发了多次，但是andriod没有该问题。
isStop = true;
videoElem[0].pause();
}
} else if (curTime == 248) {
$('.js_second_stop').removeClass('hide');
}
});
平常看视频，按下Play和Pause就行了，想让视频更好玩儿吗？那试试timeupdate！记住，如果用iPhone或iPad看，得设个全局变量’isStop’来记录有没有暂停过，否则下次没法按顺序播放。要是安卓手机就没这事儿了哈。
同层播放器的使用
videoElem.on('ended',function(){});
微信安卓版里面，只要你打开“同层播放器”，就能看见有两个地方可以设置执行特定动作的监听了，比如开机关机、回到原本浏览界面之类的。不过得记得，这功能虽然好用，但微信并不会帮你自动关闭同层播放器。所以，如果你接下来还想展示别的内容，那就只能直接把它们放在播放器上了，可能会有点怪怪的感觉。
videoElem.on('timeupdate',function(){
if(videoElem[0].ended){
//播放结束
}
}
视频格式的选择
记住，挑视频格式得看清编码！别忘了，MP4就得用h.264，否则某些iPhone只会有声音没画面。Canvas播视频还会有锯齿的烦恼，更糟糕的是，有的安卓手机只能听到声音却看不到图像。
搞嵌入视频真有点麻烦，不过有了技巧就轻松多了。希望我这个小经验能帮到大家。如果你也有啥好方法，或者遇到过类似问题，欢迎在下面留言哈~别忘了点赞分享，让更多人知道！
videoElem.on("x5videoenterfullscreen", function(){}
videoElem.on('x5videoexitfullscreen',function(){}
评论0