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>

可以看到全屏不正常了

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

所以，目前的解决办法是在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);

    }

  });

2.

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

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

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

举个栗子

<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播放器全屏出错解决 & 属性poster底图占满<video>的方法的更多相关文章

  1. 在layui layer 弹出层中加载 layui table

    layui.use('table', function(){ var table = layui.table; layer.open({ type : 1, area : [ "600px& ...

  2. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  3. layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  4. layer 弹出层 不居中

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  5. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  6. layer弹出层右上角的关闭按钮怎么没有显示

    问题描述:layer弹出层右上角的关闭按钮怎么没有显示,但鼠标移上去又可以点击 解决方式: 这是因为样式中需要一个图标,你的项目中缺少.解决如下:1.下载图标:http://www-x-zi-han- ...

  7. OA项目之弹出层中再弹出层

    弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...

  8. layer弹出层

    最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...

  9. Layer弹出层销毁问题

    Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...

随机推荐

  1. iOS Socket第三方开源类库 ----AsyncSocket

    假如你也是一个java程序员,而你又不是很懂Socket. 下面我的这篇文章也许能帮助你一些. http://xiva.iteye.com/blog/993336 首先我们写好上面文章中的server ...

  2. stm32 DMA数据搬运 [操作寄存器+库函数]（转）

    源:stm32 DMA数据搬运 [操作寄存器+库函数]        DMA(Direct Memory Access)常译为“存储器直接存取”.早在Intel的8086平台上就有了DMA应用了.   ...

  3. 74HC166与TPIC6A595分析（转）

    源:Atmega162串行外设接口SPI 一.Atmega162的SPI接口基本概念与工作原理 SPI接口的全称是"Serial Peripheral Interface",意为串 ...

  4. box2d中的物理世界

    box2d中的物理世界,即b2World类就是一个包含了各种物体(body,物理体,或者叫刚体),固定附着物(fixture,形状与物理体的绑定物)以及各种约束体(比如关节),并使其在当中完成各种交互 ...

  5. 最基本的SQL语法/语句

    DDL—数据定义语言(Create,Alter,Drop,DECLARE) DML—数据操纵语言(Select,Delete,Update,Insert) DCL—数据控制语言(GRANT,REVOK ...

  6. java的HashCode和equals

    什么时候用到hashcode,什么时候用到equals? 首先java为每个对象都生成有默认的hashcode,这个java core里说是java对象的内存地址,但是equals方法里比较的也是对象 ...

  7. bzoj2555

    开始时间:19:40 完成时间:21:00 传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2555 题目大意:(1):在当前字符串的后面插入一 ...

  8. 解callback嵌套

    function checkPassword(username,password,callback){ var pwdHash; var queryStr = 'select * from user ...

  9. java中String相等问题

    java中判断两个字符串是否相等的问题   判断两个字符串是否相等的问题.在编程中,通常比较两个字符串是否相同的表达式是"==",但在java中不能这么写.在java中,用的是eq ...

  10. java 环境变量 windows（Java之负基础实战）

    1.已经安装了JDK 添加系统变量 1.1.添加JAVA_HOME jdk路径,例如:C:\Program Files\Java\jdk1.8.0_65 1.2. PATH 添加内容 %JAVA_HO ...