热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本文主要介绍了layer弹出层中H5播放器全屏出错解决&属性poster底图占满video的方法,具有很好的参考价值,下面跟着小编一起来看下吧

1.

在layer弹窗组件中

如果使用了flash播放器,全屏是正常的

但若使用了HTML5的播放器,全屏失效

举个栗子




 
 
 

可以看到全屏不正常了

通过调试发现是这个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来控制,实现铺满

举个栗子

推荐阅读
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 本文详细介绍了 Flink 和 YARN 的交互机制。YARN 是 Hadoop 生态系统中的资源管理组件,类似于 Spark on YARN 的配置方式。我们将基于官方文档,深入探讨如何在 YARN 上部署和运行 Flink 任务。 ... [详细]
  • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
  • 落樱3D v0.5是一款在Android平台上发布的3D美少女格斗游戏,本次更新带来了多项新功能和优化。 ... [详细]
  • 本文提供了一系列Python编程基础练习题,涵盖了列表操作、循环结构、字符串处理和元组特性等内容。通过这些练习题,读者可以巩固对Python语言的理解并提升编程技能。 ... [详细]
  • 通过Web界面管理Linux日志的解决方案
    本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法,使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境,还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]
  • 本文详细探讨了 Django 的 ORM(对象关系映射)机制,重点介绍了其如何通过 Python 元类技术实现数据库表与 Python 类的映射。此外,文章还分析了 Django 中各种字段类型的继承结构及其与数据库数据类型的对应关系。 ... [详细]
  • 探讨了在有序数列中实现多种查询和修改操作的高效数据结构设计,主要使用线段树与平衡树(Treap)结合的方法。 ... [详细]
  • 深入理解T-SQL中的NULL与三值逻辑
    本文探讨了SQL Server中的三值逻辑,解释了谓词计算结果为TRUE、FALSE和UNKNOWN的规则。通过具体示例,详细说明了如何正确处理NULL值,并探讨了在不同约束条件下的行为。 ... [详细]
author-avatar
手机用户2602891927
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有