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. Spring MVC之Action输入参数

    第一部分:Action输入参数Spring MVC 通过@RequestMapping注解映射请求,最终的真正执行代码为处理器方法,即@RequestMapping注解的方法.Spring MVC方法 ...

  2. 处理JSON格式的数据

    JSON格式的数据是最常用的数据格式,处理方法的选择就显得比较重要了.我常用的一种是用对象来接收,然后保存在数组中,需要时直接从数组中取值.下面列出一个小例子. .h文件中: #import < ...

  3. Oracle用户权限分配

    一.权限分类 系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对表或视图而言的). 二.系统权限管理 1.系统权限分类: ...

  4. 关于String的相关常见方法

    package Stirng类; /** * String 常见的相关方法摘要 * @author Administrator * */ public class DemoStringMethod { ...

  5. 把windows的bat用好了，也很不错

    taskkill /f /t /im nginx.exe cp2nginx xcopy /e /i /y “D:\workspace\workspace1\aff\WebContent” “D:\ng ...

  6. C#创建datatable （转）

      C#创建datatable 方法一: DataTable tblDatas = new DataTable("Datas"); DataColumn dc = null; dc ...

  7. perl访问数组中变量

    数组一个是存储标量值的无序列表变量. 数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取,实例如下: #!/usr/bin/perl @names = (" ...

  8. QStandardItemModel的简单应用

    The QStandardItemModel class provides a generic model for storing custom data. QStandardItemModel提供了 ...

  9. 安装 mrtg

    http://blog.csdn.net/cnbird2008/article/details/2072627

  10. 第四组UI组件：AdapterView及子类

    AdapterView组件是一组重要的组件,AdapterView本省是一个抽象基类,它派生的子类在用法上十分相似,只是显示界面与一定的区别,因此这次针对它们的共性集中讲解,并突出介绍他们的区别. A ...