个人中心
gpt4 book ai didi

jquery - Firefox 中带有 Html5 视频不良行为的 Fancybox 的尺寸

转载 作者：行者123 更新时间：2023-11-28 12:16:45 25 4
gpt4 key购买 nike

单击视频链接时，我需要在 fancybox 中显示 html5 视频。如果乍一看这似乎是一个已经回答的问题，请进一步阅读，因为我已经对 15 个不眠小时进行了广泛的研究。哎哟。

这是我的页面:

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.fancybox.pack.js?v=2.1.3"></script>

<style type="text/css">
video {
    width: 100%;
    max-width: 100%;
    height: auto;
} 
   </style>

</head>
<body>

<a class="fancybox2" rel="group" title="Play Video" href="#data1">Play Video</a>

<div style="display:none"><div id="data1">
<video controls preload="none" poster="bathtub.jpg">
  <source src="bathtub.mp4" type="video/mp4">
  <source src="bathtub.webm" type="video/webm">
<embed src="bathtub.flv" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" 

allowfullscreen="true" autoplay="false" />
  Your browser does not support the video tag.
</video>
</div></div> 


            <script type="text/javascript">




                jQuery(document).ready(function() {



                    // FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
                    jQuery(".fancybox2").fancybox({
                        scrolling : 'no',
                        fitToView: 'true',
                        openEffect  : 'none',
                        closeEffect : 'none',
                        helpers : {
                            media : {}
                        }
                    });


                });


            </script>
</body>
</html>

因为我最终想要实现的是让 fancybox 及其内容 html5 视频具有响应性，因此让 html5 视频在任何屏幕尺寸下填充 fancybox，我在标题中为视频元素插入了该样式: 

<style type="text/css">
video {
    width: 100%;
    max-width: 100%;
    height: auto;
} 
   </style>

在 Chrome 和 IE 中一切正常:当我点击视频链接时，fancybox 正确打开，html5 视频及其海报和控件在 fancybox 中正确显示，填充它，当我调整浏览器大小时fancybox 会相应地缩放，html5 视频也会相应地缩放，它会以任何尺寸优雅地填充 fancybox。

但是，Firefox(最新版本，26)以默认大小 100X100 像素打开 fancybox，html5 视频海报缩放并适合 fancybox，而控件不适合 fancybox 大小。简而言之，在 Firefox 上，fancybox 打开得太小，就好像 Firefox 没有选择视频元素的 640x360 大小，因此从其 javascript 文件中提取默认的最小大小。如果我点击那个小 fancybox，视频开始播放，当它开始时，如果我调整窗口大小，现在 FF 会按预期调整 fancybox 和视频的大小。

如果我删除视频 elemnet 样式，fancybox 在所有浏览器(包括 Firefox)中都会按预期打开，但是当我调整窗口大小时，视频不会随着 fancybox 缩放。

我尝试在 fancybox 调用中以任何可能的组合使用 autoSize、autoResize、width 和 height，但没有成功。

我如何才能打开 fancybox 并根据视频元素保留空间(在我的例子中为 640x360)调整大小，并在所有浏览器的不同浏览器尺寸下顺利缩放所有内容？

提前感谢所有花时间引导我走向正确方向的人。希望肯尼迪也在附近。

最佳答案

尝试了 Carl 建议的 afterLoad 解决方案(不更改 Doctype，因为正如 JFK 所说，这不是一个选项，至少在我的情况下)，事情或多或少保持不变:fancybox 现在在指定的位置打开Firefox 中的宽度和高度甚至保留了视频元素的样式，但是所有浏览器都会忽略该样式，并且当浏览器调整大小时，视频不会以完全填充 fancybox 的方式缩放。

然而，这不知何故为我打开了灯，并把我带到了正确的方向。 Carl 解决方案，保留原始文档类型，似乎不适用于 html5 视频，因为无论您指示哪种宽度和高度，视频始终显示在 fancybox 内，其海报图像的宽度/高度决定了 fancybox 的宽高比，当您调整浏览器大小。

我所做的是使用 ffmpeg 获取视频的帧宽度和高度，将它们注入(inject) fancybox anchor 的数据宽度和数据高度并添加 aspectRatio : true 到 fancybox javascript。

这是完整的固定和工作代码(我使用自定义 ffmpeg 类来检索视频信息)，如果有人有同样的问题(与问题代码相比，红色是所做的添加/更改):

**<?php 
include ("class/ffmpeg.class.php");
?>**

    <!DOCTYPE html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.fancybox.pack.js?v=2.1.3"></script>

    <style type="text/css">
    video {
        width: 100%;
        max-width: 100%;
        height: auto;
    } 
       </style>

    </head>
    <body>

**<?php

// instantiate ffmpeg ultimate class
$ffmpegultimate = new FfmpegUltimate ();

$path_original = "bathtub.mp4";

$output = $ffmpegultimate->fileGetInfo ( $path_original );

$tarray = implode(" ", $output); 

preg_match('/(\d{2,4})x(\d{2,4})/', $tarray, $matches);

?>**

    <a class="fancybox2" rel="group" title="Play Video" href="#data1" **data-width="<?php echo $matches[1]; ?>" data-height="<?php echo $matches[2]; ?>"**>Play Video</a>

    <div style="display:none"><div id="data1">
    <video controls preload="none" poster="bathtub.jpg">
      <source src="bathtub.mp4" type="video/mp4">
      <source src="bathtub.webm" type="video/webm">
    <embed src="bathtub.flv" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" 

    allowfullscreen="true" autoplay="false" />
      Your browser does not support the video tag.
    </video>
    </div></div> 


                <script type="text/javascript">




                    jQuery(document).ready(function() {




                    // FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
                    jQuery(".fancybox2").fancybox({
                        scrolling : 'no',
                        fitToView: 'true',
                        openEffect  : 'none',
                        closeEffect : 'none',
                        helpers : {
                            media : {}
                        }**,
                        autoSize: false,
                        aspectRatio : true,
                        afterLoad: function () {
                            this.width = $(this.element).data("width");
                            this.height = $(this.element).data("height");
                        }**

                    });


                    });


                </script>
    </body>
    </html>

为什么 Firefox 不喜欢我在问题中发布的代码还有待观察，但这个解决方案适用于所有主流浏览器，因此我将接受我自己的答案，希望其他人可以从中受益 future 。感谢 Carl 以某种方式为此做出的贡献。如果系统允许，我会尝试为您 +1，因为您提供了很大帮助。

关于jquery - Firefox 中带有 Html5 视频不良行为的 Fancybox 的尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21242521/

25 4 0
文章推荐： swift - 某些数据未从 Firebase 数据库 Swift 3 中读取
文章推荐： css - Logo 在 css 中重叠？
文章推荐： ios - UiTableView cellForRowAt 没有返回好的值并且无法滚动
文章推荐： javascript - 当我将checked设置为false时，为什么新创建的复选框会被选中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com