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. LPC1768的iic通讯

    LPC1768有三路IIC,其中IIC0支持高速模式和plus模式,另外两路是普通IIC,使用IIC的过程如下 首先依然是打开IIC时钟,同时打开GPIO时钟 然后配置引脚为IIC功能 另外,因为ii ...

  2. collectionviewcell 添加删除按钮 响应区域的问题

    在collectionviewcell 的右上角添加了一个删除按钮,但是发现只有cell和删除按钮重合的区域才会响应点击事件 后来doctor 李说这是iOS 事件响应链的机制(http://www. ...

  3. List学习笔记

    List 特点:1.有序.2.可重复. ArrayList: 底层是数组,数组是有下标的. 会自动扩容,底层默认初始化容量是10,扩大之后的容量预设是原来容量的一半(jdk 1.8).以前好像是原容量 ...

  4. Tsinsen-1486:树【Trie树 + 点分治】

    暴力部分: 这个题一开始的想法是 n^2 枚举两个点,然后logn维护LCA,在倍增的同时维护异或值和 k 的个数. s_z_l老爷指导了新的思路,既然这个树只有n^2个LCA,那么枚举LCA,同时向 ...

  5. MySQL常用命令（参考资料，部分改动）

    一.连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 . 连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...

  6. DataTable distinct 去重复

    有时我们需要从DataTable中抽取Distinct数据,以前总是以对DataTable进行foreach之类纯手工方式获取. 近来发现DataView可以帮我们直接获取Distinct数据,汗一个 ...

  7. Vue 响应式总结

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...

  8. QT第一天学习

    sudo apt-get install libqt4-dev回顾: 面向对象方法: 封装.继承.多态 封装:类 数据和操作 实现了信息隐藏 public: 类的内部 类的外部 private: pr ...

  9. js模块化开发——require.js学习总结

    1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...

  10. JIRA描述默认值设置

    JIRA描述默认值设置 Setting a Default Value in the Description Field 转自https://confluence.atlassian.com/jira ...