脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layer 播放器 全屏

layer弹出层中H5播放器全屏出错的解决方法

 更新时间：2017年02月21日 15:09:45   作者：imwtr  
本文主要介绍了layer弹出层中H5播放器全屏出错解决&属性poster底图占满video的方法，具有很好的参考价值，下面跟着小编一起来看下吧

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; 
 }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 小程序api实现promise封装过程解析

    小程序api实现promise封装过程解析

    这篇文章主要介绍了小程序api实现promise封装过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • IntersectionObserver判断是否在可视区域详解

    IntersectionObserver判断是否在可视区域详解

    这篇文章主要为大家介绍了IntersectionObserver判断是否在可视区域详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • webpack配置proxyTable时pathRewrite无效的解决方法

    webpack配置proxyTable时pathRewrite无效的解决方法

    这篇文章主要介绍了webpack配置proxyTable时pathRewrite无效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • js中判断变量类型函数typeof的用法总结

    js中判断变量类型函数typeof的用法总结

    下面小编就为大家带来一篇js中判断变量类型函数typeof的用法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 80行代码写一个Webpack插件并发布到npm

    80行代码写一个Webpack插件并发布到npm

    最近在学习 Webpack 相关的原理，本文用80行代码写一个Webpack插件并发布到npm，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js实现弹窗居中的简单实例

    js实现弹窗居中的简单实例

    下面小编就为大家带来一篇js实现弹窗居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • javascript 限制输入脚本大全

    javascript 限制输入脚本大全

    javascript限制输入脚本大全 ,方便网页设计的朋友经常能用的到，建议收藏下。代码有点慢，大家慢慢看啊。
    2009-11-11
  • js实现AES加密解密功能(简易又全面)

    js实现AES加密解密功能(简易又全面)

    在项目中传输数据,可通过对请求数据或响应数据进行加密,防止信息泄露,下面这篇文章主要给大家介绍了js实现AES加密解密功能的相关资料,需要的朋友可以参考下
    2024-05-05
  • JS正则表达式验证数字代码

    JS正则表达式验证数字代码

    本篇文章主要是对JS正则表达式验证数字的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript定义类和对象的方法

    JavaScript定义类和对象的方法

    这篇文章主要介绍了JavaScript定义类和对象的方法,分别以函数方式与Object类方式实现,是javascript非常重要的技巧,需要的朋友可以参考下
    2014-11-11

最新评论