layer弹出层中H5播放器全屏出错的解决方法

前端之家收集整理的这篇文章主要介绍了layer弹出层中H5播放器全屏出错的解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.

在layer弹窗组件中

如果使用了flash播放器,全屏是正常的

但若使用了HTML5的播放器,全屏失效

举个栗子

<Meta charset="utf-8">

我是字

Box">

可以看到全屏不正常了

通过调试发现是这个class的处理影响了全屏的展示

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

2.

video标签的poster属性指代视频未播放前放置的一张图片

如果video容器宽高小于等于poster图的宽高,则图片能充满容器,反之容器左右就会预留黑色栏

除了手动更换一张大图之外,可以结合CSS来控制,实现铺满

举个栗子

Box">

现在图片宽度比容器小,没铺满,参考这里的讨论 可以用CSS让其撑开(这里相当于放大了,不想放大需自行更换大图)

poster里放一个透明图片(这里使用了一个1px*1px的base64格式透明图片),再用css定义video的background并将其覆盖住

Box">

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/41431.html

猜你在找的JavaScript相关文章