问题分析
在用layer弹出框时，用HTML5播放器就遇到全屏失灵的困扰。啥原因？一个class对它有干扰。怎么解决？调试下就能找到答案，只要删除那个class，这事就算搞定了。但是，别忘了得放在成功的回调里去做，这样才能保证在下次事件循环里完成，防止可能的冲突和影响。
解决方案
HTML5视频全屏没反应怎么办？赶紧试试看这些方法！：
我是字
layer.open({ type: 1, title: false, shadeClose: true, area: ['400px', '350px'], content: $('#box'), success: function(layero){ } });
点出layer弹窗成功后，记得把影响全屏展示的那帮子class给删了。
别忘了在下一次事件循环前把class删了，免得犯糊涂。
这样子就能搞定HTML5播放器在 layer弹窗里无法全屏的问题！
poster属性控制
说到视频标签的海报属性，你得了解如何搞定它。这个属性就是显示视频还没播就看到的那张图。所以如果容器比海报大或差不多大，那图片就可以完全布满容器；可不巧的是，如果容器小了点，那么你们就能察觉到黑色边框了。想要让海报好好铺满容器，可以试试这样做：
1.手动更换一张大图来适应容器大小。
2.结合CSS来控制poster属性，实现铺满效果。
给海报上加张透明图，再用CSS把视频的背景设成那张图，就可以盖过海报了。
结合CSS实现铺满
针对海报属性占不满视频框的问题，咱们用CSS就能有效解决~
在海报上加个透明的图，比如1像素乘以1像素的base64透明图就行了。
用CSS设置下视频标签的背景图，盖住海报
layer.open({
type: 1,
title: false,
shadeClose: true,
area: ['400px', '350px'],
content: $('#box'),
success: function(layero){
console.log(layero)
// hack处理layer层中video播放器全屏样式错乱问题
setTimeout(function() {
// $(layero).removeClass('layer-anim');
}, 0);
}
});
这样一来，就算原帖子的图片有点小，也能用CSS搞定全屏啦～
优化体验
项目开发的时候，想要让用户觉得更好看、更舒服，就得注意下面这几个地方哦：
想下在不同屏幕分辨率下怎么做好适应，让每台机器都能看到清晰流畅的视频！
用响应式设计和媒体查询功能让你的视频播放器能随手机大小改变外观和布局！
HTML5的部分功能在各种浏览器里表现不太一样，为了让它们能正常运转，需要做一些兼容性的调整！
总结
看了这篇文章大家应该就知道怎么样搞定H5播放器在layer弹出框里全屏播放和海报铺满整个视频的问题。只要删掉某个特定的class，再加点CSS小技巧就行。这样一来就能轻轻松松应付这些常见问题，还给用户带来更好的使用感受。以后做项目开发时，记得把这些小妙招用上！它们会帮你攻破许多难题，让你的网页更具吸引力的！
希望这篇文章能帮到你！有啥解决这个问题的好办法或者你自己遇到过相似的情况吗？快在下方评论区留言和大家分享下！
。
评论0