2

ビデオを再生する Fancybox 2 を介して開かれている IFrame があります。

HTML:

<a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a>

Javascript:

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe', 
    helpers     : { 
        title: null 
    }
});

動画はユーザーアップロードなのでサイズはわかりません。最終的には Fancybox に maxHeight と maxWidth を設定する予定ですが、トラブルシューティングを容易にするためにそれらを削除しました。

コンテンツに基づいて Fancybox の幅を設定するにはどうすればよいですか? 幅が約 400px の私のテスト ファイルでは、fancybox 自体が幅 830/800px (外側と内側の幅) に設定されています。 fancyboxwidth.png

autoSize と fitToView は効果がありません。デフォルトの幅を設定する CSS またはコードが IFrame ページにありません。Fancybox コードで幅を強制すると機能しますが、コンテンツが動的であるため、ライブ システムでは機能しません。

また、高さのサイズ変更について尋ねる別の質問から関数を適応させようとしましたが、どちらも機能しませんでした:

beforeShow  : function() { 
    $('.fancybox-iframe').load(function() { 
        $('.fancybox-inner').width($(this).contents().find('body').width()); 
    }); 
}

編集:FancyboxにロードしようとしているIFrameページのコードを追加しました:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <cfoutput>
            <script type="text/javascript" src="/Javascript/jwplayer.js"></script>
            <script type='text/javascript'> 
                var max_video_width = 924;
                jwplayer("preview").setup({
                    flashplayer: "/VideoPlayer/player.swf",
                    controlbar: "bottom",
                    file: "/videos/file_name",
                    stretching: 'file_name',
                    autostart: true,
                    events: {
                        onMeta: function(event) {
                            if (get_meta) {
                                if(event.metadata.width != undefined && event.metadata.height != undefined) {
                                    get_meta = false;
                                    if (event.metadata.width > max_video_width) {
                                        var new_height = (max_video_width / (event.metadata.width / event.metadata.height))  
                                        jwplayer("preview").resize(max_video_width,new_height);
                                        jwplayer("preview").stop();
                                        $('##preview_wrapper').width(max_video_width).height(new_height);
                                    } 
                                    else {
                                        jwplayer("preview").resize(event.metadata.width,event.metadata.height);
                                        jwplayer("preview").stop();
                                        $('##preview_wrapper').width(event.metadata.width).height(event.metadata.height);
                                    }
                                    $('.loading-video').slideUp('fast',function(){$('.loading-video').remove()});
                                }
                            }
                        }
                    }
                });
            </script>
        </cfoutput>
    </body>
</html>
4

3 に答える 3

5

ファイルを見ると、intro-file.cfm物事がより明確になります。

preview_wrapperファイル内のコードが正常に機能している場合、コンテナから寸法を取得できると思います。

たった2つの質問：

  • $たとえば...を使用している場合、ファイル内にファイル$('.loading-video').slideUp()を含めるべきではありませんか?jquery.jsintro-file.cfm
  • ##セレクターの前のこのダブルは$('##preview_wrapper').width()正しいですか?

すべてが正常に機能していると仮定して、fancybox スクリプトに含めてみてください。

  scrolling: "no", // optional to avoid scrollbars inside fancybox
  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width();
   this.height = $('.fancybox-iframe').contents().find('#preview_wrapper').height();
  }

... プレーヤーのラッパーから寸法を取得します。

于 2012-06-14T18:37:20.550 に答える
1

iframe の幅は現在計算されていません。たぶん、このように各iframeの幅/高さを設定できます- http://jsfiddle.net/vVKMF/

于 2012-06-14T08:08:02.927 に答える
-1

に追加autoSize:

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe',
    autoSize    : true, 
    helpers     : { 
        title: null 
    }
});

また ：

fitToView  : true,
于 2012-06-13T21:33:35.417 に答える