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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
webpack多页面开发实践
Dec 18 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
四十九个javascript小知识实用技巧
Nov 20 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/03/13 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
对python多线程与global变量详解
2018/11/09 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
给国外客户的邀请函
2014/01/30 职场文书
中秋手机店促销方案
2014/06/16 职场文书
政协工作总结2015
2015/05/20 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
python控制台打印log输出重复的解决方法
2021/05/14 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Python OpenCV形态学运算示例详解
2022/04/07 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android