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. 10.8.5如何升级(app store 出错 请稍后重试 100)

    出现问题:苹果以前的老版本,OS X 10.8或是10.8.5在当年提示你升级,你又任性没升级的时候,拖过那阵,你再想升级,就是各种报复.进app store下载或是更新东西都是弹出app stpre ...

  2. LPC1788 nand驱动

    Lpc 1788自带有emc接口用于驱动nandflash,norflash,sdram设备,对于nandflash驱动因为配置简单,时序也简单 首先,针对nandflash而言应当在系统中有三个地址 ...

  3. 企业证书APP发布流程

    企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...

  4. 【转】43个优秀的Swift开源项目推荐

    作为一门集百家之长的新语言,Swift拥有着苹果先天的生态优势,而其在GitHub上各种优秀的开源项目也层出不穷.本文作者@SwiftLanguage从2014年6月苹果发布Swift语言以来,便通过 ...

  5. Java中实现Serializable接口为什么要声明serialVersionUID？

    什么情况下需要修改serialVersionUID 的值?      序列化运行时使用一个称为 serialVersionUID 的版本号与每个可序列化类相关联,该序列号在反序列化过程中用于验证序列化 ...

  6. 让Terminal显示git分支

    vi ~/.bash_profile ### 显示git分支 parse_git_branch () { git branch 2> /dev/null | sed -e '/^[^*]/d' ...

  7. fold change(ratio)

    fold change 英文简称 : FC 中文全称 : 倍性变化 所属分类 : 生物科学 词条简介 : 一种用于描述两个用于相比的对象数量差异的方法.例如,第一个样本和第二个样本的量是50/10,那 ...

  8. PHP新手之学习数组声明

    数组是在程序设计中,为了处理方便, 把具有相同类型的若干变量按有序的形式组织起来的一种形式.这些按序排列的同类数据元素的集合称为数组.下面介绍PHP中的数组声明. 一.数组的概述 1.数组的本质:管理 ...

  9. Carthage - 一个简单、去集中化的Cocoa依赖管理器

    作为一名新时代的90后猿 在swift大势所趋的时候  怎能不会Carthage 配置它其实很简单  下面我们一步一步来 (1)打开你的终端 输入 brew update brew install c ...

  10. Unity3D 相关技术

    slua相关shader编程相关animation相关attack check攻击检测相关