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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
js实现文字截断功能
Sep 14 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 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
MySQL数据源表结构图示
2008/06/05 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python根据距离和时长计算配速示例
2014/02/16 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
pygame播放音乐的方法
2015/05/19 Python
python实现数组插入新元素的方法
2015/05/22 Python
python 内置函数filter
2017/06/01 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python入门教程 python入门神图一张
2018/03/05 Python
解决django FileFIELD的编码问题
2020/03/30 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
学校元旦晚会开场白
2014/12/14 职场文书
会计简历自我评价
2015/03/10 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python