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开发——判断手机格式

    添加NSString分类 1.在NSString+Check.h中,添加方法: -(BOOL)checkPhoneNumInput; 2.在NSString+Check.m文件中: -(BOOL)ch ...

  2. S3C2440看门狗解析

    个PCLK周期的复位信号 也就是说,在某些环境下,看门狗可以当做定时器使用,当他中断的时候并不发生复位,只发生中断,我看看图 看门狗的中断和复位信号是可以依靠wtcon来切断的(看门狗的时钟是无法切断 ...

  3. springmvc的jdbcTemplate 插入 返回主键

    public int insertCustomer(final Customer customer) {        //TODO.        final String sql = " ...

  4. AFNetworing进行POST上传 分类： ios技术 2015-04-01 17:03 73人阅读 评论(0) 收藏

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; //申明返回的结果是json类型 m ...

  5. Oracle数据库中的函数

    1.随机数函数:DBMS_RANDOM.RANDOM )) FROM DUAL; --产生一个100以内的随机数 *dbms_random.value) FROM dual; --产生一个100-10 ...

  6. Struts2配置dtd约束

    Struts2和Struts1的区别: 一.elclipse-ee开发 搭建环境eclipse-ee 1.加入jar包  apps/struts2-blank.war解压 2.在web.xml文件中配 ...

  7. eclipse中集成svn maven开发手册---导入项目

    一,导入项目 二,创建提分支 三,maven编译打包 四,合并主干 一,导入项目 右键,import,选择从svn检出项目 点击next,如图 如果是第一次导入,选择创建新的资源库,点击next,输入 ...

  8. Swift 添加到TableView实现动画效果

    let indexPath = NSIndexPath(forRow:0 ,inSection:0) self.tableView.insertRowsAtIndexPaths([indexPath] ...

  9. Zepto.js-Ajax 请求

    Ajax 请求 执行Ajax请求.它可以是本地资源,或者通过支持HTTP access control的浏览器 或者通过 JSONP来实现跨域. 引入Ajax模块 <script src=&qu ...

  10. vmwvare 网卡设置讲解