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 相关文章推荐
使用正则替换变量
May 05 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
微信小程序 支付功能开发错误总结
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异常处理浅析
2015/05/12 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
单位成立周年感言
2014/01/26 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2014年环卫工作总结
2014/11/22 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
学生会自荐信
2019/05/16 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
Python读写yaml文件
2022/03/20 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android