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


Posted in Javascript onFebruary 21, 2017

1.

在layer弹窗组件中

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

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

举个栗子

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 <script src="layer/layer.js"></script>
 <style>
 </style>
</head>
<body>
<h1>我是字</h1>
<div id="box">
<video id="video" controls preload="auto" width="400px" height="300px">
 <source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
</video>
</div>
<script>
 layer.open({
 type: 1,
 title: false,
 shadeClose: true,
 area: ['400px', '350px'],
 content: $('#box'),
 success: function(layero){
 }
 });
</script>
</body>
</html>

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

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

可以看到全屏不正常了

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

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

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

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

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

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);
 }
 });

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

2.

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

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

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

举个栗子

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

<div id="box">
 <video id="video" controls preload="auto" width="700" height="300" poster="../poster.png" >
  <source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
 </video>
</div>

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

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

<div id="box">
 <video id="video" controls preload="auto" width="700" height="300" poster="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" >
  <source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
 </video>
</div>
video {
  background: transparent url('../poster.png') no-repeat 0 0; 
  -webkit-background-size: cover; 
   -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
 }

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

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

Javascript 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
树结构之JavaScript
Jan 24 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
微信小程序 支付功能开发错误总结
Feb 21 #Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 #Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
JavaScript学习笔记之Function对象
2015/01/22 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
班主任个人工作反思
2014/04/28 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
西岭雪山导游词
2015/02/06 职场文书
婚前保证书范文
2015/02/28 职场文书
体育教师研修感悟
2015/11/18 职场文书
详解Redis复制原理
2021/06/04 Redis