Question

点击视频链接时，我需要在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文件中提取默认的最小大小。如果我点击那个小花哨，视频会启动，当它开始播放时，如果我调整窗口大小，现在FF会按照预期调整fancybox和视频的大小。

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

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

如何打开fancybox并根据视频元素预留空间（在我的情况下为640x360）进行调整，并在所有浏览器中以不同浏览器大小顺畅缩放所有内容？

提前感谢所有愿意花时间把我推向正确方向的人。希望jfk也是如此。

Answer 1

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

然而，这已经以某种方式为我改变了光线，并把我推向了正确的方向。保留原始doctype的Carl解决方案似乎不适用于html5视频，因为无论您指出哪个宽度和高度，视频总是在其海报图像的宽度/高度处显示在fancybox内部，当您使用fancybox方面时调整浏览器的大小。

我所做的是使用ffmpeg获取视频的帧宽和高度，将它们注入fancybox锚的数据宽度和数据高度，并将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不喜欢我在问题中发布的代码，但这个解决方案适用于所有主流浏览器，因此我将接受我自己的答案，希望其他人可以从中受益未来。感谢Carl以某种方式为此做出贡献。如果系统允许我，我会尝试为你+1，因为你得到了很大的帮助。

Answer 2

我也遇到过Fancybox的麻烦。就我而言，我必须解决FF的两个问题，帮助我解决所有问题。

首先我添加了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

其次，我通过应用后加载解决了这个问题。

$('.fancybox').fancybox({
    scrolling:no,
    fitToView: true,
    autoSize: false,
    afterLoad: function () {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});

在Firefox中使用Html5视频不良行为的Fancybox的尺寸

2 个答案: