社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 H5教程 如何解决layer弹出层中H5播放器全屏出错

如何解决layer弹出层中H5播放器全屏出错

不言
不言
Jun 25, 2018 am 10:17 AM
全屏 播放器

本文主要介绍了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>
<p 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>
</p>
<script>
 layer.open({
 type: 1,
 title: false,
 shadeClose: true,
 area: [&#39;400px&#39;, &#39;350px&#39;],
 content: $(&#39;#box&#39;),
 success: function(layero){
 }
 });
</script>
</body>
</html>
登录后复制

可以看到全屏不正常了

通过调试发现是这个class的处理影响了全屏的展示

所以，目前的解决办法是在layer层创建之后，移除这个class即可（注意在success回调中置于下一轮事件循环）

layer.open({
 type: 1,
 title: false,
 shadeClose: true,
 area: [&#39;400px&#39;, &#39;350px&#39;],
 content: $(&#39;#box&#39;),
 success: function(layero){
  console.log(layero)
  // hack处理layer层中video播放器全屏样式错乱问题
  setTimeout(function() {
  // $(layero).removeClass(&#39;layer-anim&#39;);
  }, 0);
 }
 });
登录后复制

2.

video标签的poster属性指代视频未播放前放置的一张图片

如果video容器宽高小于等于poster图的宽高，则图片能充满容器，反之容器左右就会预留黑色栏

除了手动更换一张大图之外，可以结合CSS来控制，实现铺满

举个栗子

<p 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>
</p>
登录后复制

现在图片宽度比容器小，没铺满，参考这里的讨论 可以用CSS让其撑开（这里相当于放大了，不想放大需自行更换大图）

poster里放一个透明图片（这里使用了一个1px*1px的base64格式透明图片），再用css定义video的background并将其覆盖住

<p 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>
</p>
登录后复制

video {
  background: transparent url(&#39;../poster.png&#39;) no-repeat 0 0; 
  -webkit-background-size: cover; 
   -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
 }
登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

html5和css3以及jquery实现音乐播放器

关于HTML5中video标签浏览器兼容性增强的方案分享

以上是如何解决layer弹出层中H5播放器全屏出错的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7517
15
CakePHP 教程
1378
52
steam的账户名称是什么格式
79
11
win11激活密钥永久
53
19
NYT连接提示和答案
21
66
显示更多
Related knowledge
win7窗口全屏快捷键是什么 win7窗口全屏快捷键是什么 Jun 29, 2023 pm 07:33 PM

win7窗口全屏快捷键是什么？我们在使用win7系统的时候，有时候开启软件的时候，它的运行窗口不是全屏的，这个时候我们需要通过鼠标去最大化窗口。那么有什么快捷键可以快速去切换最大化窗口显示呢？接下来和大家分享win7窗口全屏快捷键教程。一、Alt+Enter一般程序，包括大部分游戏在内的没有自带全屏快捷键的程序。二、F11几乎所有的浏览器，都可以用这个快捷键进行全屏。三、Alt+V+U包括word文档在内的大部分文档工具都可以用这个快捷键进行全屏。四、Ctrl+F/Space很多播放器软件，让视

ppt怎么全屏放映？ppt一键全屏快捷键 ppt怎么全屏放映？ppt一键全屏快捷键 Mar 16, 2024 pm 06:16 PM

　　在办公、学习的时候，经常用到ppt进行演示，为了进一步提高观感，我们通常需要将ppt全屏演示。那么ppt一键全屏快捷键是什么？ppt如何全屏放映？下面就来看看具体教程。　　ppt快捷键快捷键是最便捷的全屏操作方式之一。只需打开要全屏显示的PPT文件，按下键盘上的“F5”键即可让幻灯片全屏展示。这种一键全屏的方式非常简单，无需浪费时间在菜单选项上，通过简单的键盘操作即可轻松完成。　　2、此外，还可以使用其他快捷键。例如，按下“Shift+F5”键，可以从当前幻灯片开始放映；按下&

VLC Chromecast无法在Windows PC上运行 VLC Chromecast无法在Windows PC上运行 Mar 26, 2024 am 10:41 AM

VLCChromecast功能在您的WindowsPC上不起作用吗?此问题可能是由Chromecast设备与VLC的铸造功能之间的兼容性问题引起的。在这篇文章中，我们将告诉你在这种情况下你可以做什么，以及如果VLC渲染器找不到你的Chromecast该怎么办。如何在Windows上使用ChromecastVLC?要使用VLC将视频从Windows投射到Chromecast，请遵循以下步骤:打开媒体播放器应用程序，转到播放菜单。导航到Renderer选项，您将能够看到检测到的Chromecast设

win10播放器进度条不动 win10播放器进度条不动 Feb 12, 2024 am 08:12 AM

Windows10v1809十月更新版正朝着史上最糟糕Windows升级义无反顾地冲过去，不但第一次正式发布后紧急撤回，还在重新打造了一个月之久后仍然Bug层出不穷，让人对微软的品控越来越担忧。现在，它的Bug清单上又多了一项，而且这次中招的是微软自家的媒体播放器WindowsMediaPlayer。近期有网友反馈，在安装最新补丁后，Windows10v1809的WindowsMediaPlayer出现了无法拖动播放进度条的问题。目前还没有找到解决办法。微软已确认了一个Bug，涉及两个补丁KB4

win10电脑有黑边调全屏操作方法 win10电脑有黑边调全屏操作方法 Jul 07, 2023 pm 07:53 PM

有时在安装win10后，发现桌面周围或两侧都有黑框，没有全屏显示，那么win10电脑有黑边怎么调整全屏呢？很多朋友不知道怎么处理，所以针对win10电脑如何调整黑边的问题，我会教你win10电脑如何调整黑边全屏。win10电脑有黑边调全屏操作方法右键点击桌面空白位置的鼠标，选择弹出菜单中的显示设置；在分辨率栏中找到与自己电脑屏幕相匹配的分辨率，一般会显示一个推荐词，如1920*1080、1366*768等；弹出提示框，让我们确认是否保留这些显示设置，直接点击保留更改；显示方向设置为横向，目前大部

iframe嵌入播放器是什么 iframe嵌入播放器是什么 Aug 25, 2023 pm 02:13 PM

iframe嵌入播放器是一种在网页中嵌入视频播放器的技术。嵌入播放器的优点有：1、灵活性，通过使用iframe标签，可以将来自不同来源的视频媒体嵌入到同一个网页中；2、易用性，只需复制并粘贴嵌入代码，即可将播放器添加到网页中；3、可以通过设置参数来控制播放器的外观和行为；4、可以通过使用JavaScript来控制播放器的操作等等。

win10电脑全屏按哪个键_win10电脑设置全屏的方法 win10电脑全屏按哪个键_win10电脑设置全屏的方法 Mar 27, 2024 pm 12:26 PM

1、如果不行，可以按win+R快捷键弹出运行，或者点击电脑左下角开始，在开始菜单上找到运行，在运行里输入：regedit。2、进入注册表编辑器后，依次选择HEKY_LOCAL_MACHINE——SYSTEM——ControlSet001——Control。3、然后再选择GraphicsDrevers——configuration。4、在configuration上右击选择查找。5、输入【scaling】，点击【查找下一个】。6、右键点击scaling，选择】修改【。7、将数值数据由4改为3即可。

快手怎么全屏播放 全屏无字模式设置方法 快手怎么全屏播放 全屏无字模式设置方法 Mar 12, 2024 pm 03:43 PM

　　快手能够轻松的满足自己的使用，让大家们每天都可以沉浸在其中，为自己解闷，解决每一次的使用，让大家们都可以一直沉浸在其中，看自己感兴趣的内容，很多人喜欢沉浸式的观看，不想要底下的评论区，旁边的点赞转发等等，想要全屏观看，享受极致的视觉盛宴，让大家都非常的喜欢，非常的满足，很多人不知道在这里该怎么开启全屏观看，所以小编为你们提供方法，有需要的小伙伴们，都可以马上的使用起来，让你们更好的享受这个平台上的各种内容！　　1、打开快手，登录自己的账号，点击左上角三条横杆，　　2、点击左下角的大屏模式，这

See all articles