0

これは私のhtmlです

<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>

<div id="aboutbarrybio" class="bio_wrapper" style="display: none;">
<div class="about_video">
    <div class="video_wrapper">
        <div class="placard" style="display: none;"><img width="720" height="405" style="cursor:pointer;" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png"></div>
        <div style="display: block;" class="thevideo">
            <embed width="720" height="405" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/9bZkp7q19f0&amp;autoplay=1&amp;rel=0">
        </div>
    </div>
</div>

これはfancyboxの私のjavascriptです:

$(".aboutusbox").fancybox({
  padding       : 1,
  width         : 960,
  afterShow     : function() {
    $('.fancybox-opened .placard').each(function(){
        $('.fancybox-opened .placard').show();
        $('.fancybox-opened .thevideo').hide();
    });

    $('.fancybox-opened .placard').click(function(){
        $('.fancybox-opened .placard').hide();
        $('.fancybox-opened .thevideo').show();
    });
  },
  afterClose    : function() {
    $('.fancybox-inner').empty();
  }
});

ビデオをイメージ プラカードに置き換えようとしています。次に、インラインの非表示ボックスを使用して、fancybox に表示します。問題は、ビデオが Firefox (および IE?) で再生されている間にユーザーが閉じた場合でも、バックグラウンドで再生されることです。Chrome は意図したとおりに動作します。マイナス iframe/ajax、youtube api、または単にビデオ自体を使用して緩和する方法はありますか?

4

1 に答える 1

1

インラインビデオ（および関連する問題）がなくても、次のことができます。

  • ビデオに直接リンクします（取得するにはhref）、
  • fancyboxを開き、プラカード画像をコンテンツとして設定します。
  • をプラカード画像にバインドしてclickから、YouTubeコンテンツ（コールバック内）に置き換えafterShowます。

data-*さらに、（HTML5）属性を使用して、リンク内から画像/動画のディメンションを渡すことができるため、この代わりに：

<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>

...あなたはこれを行うことができます：

<a id="about_barry" class="aboutusbox" href="http://www.youtube.com/v/9bZkp7q19f0&amp;autoplay=1&amp;rel=0" data-width="720" data-height="405">Link to Bio</a>

click次に、このスクリプトを使用してプラカード画像を表示し、YouTubeビデオ に置き換えます。

$(document).ready(function () {
    $(".aboutusbox").fancybox({
        padding: 0,
        fitToView: false, // fancybox won't auto-resize to fit in viewport
        // set placard image as content
        content: '<img class="placard" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png" width="720" height="405" alt="placard" />',
        scrolling: 'no',
        afterShow: function () {
            // get dimensions from data attributes
            var $width = $(this.element).data('width');
            var $height = $(this.element).data('height');
            // create youtube content
            var newContent = "<iframe src='" + this.href + "' frameborder='0' allowfullscreen width='" + $width + "' height='" + $height + "'></iframe>";
            // replace content on placard click
            $(".fancybox-inner").on("click", ".placard", function () {
                $(".fancybox-inner").html(newContent);
            });
        }
    });
}); // ready

JSFIDDLEデモを参照してください。

jQuery1.7以降が.on()必要な通知

于 2013-02-09T00:01:01.403 に答える