2

Youtube の画像を表示するスクリプトを作成しました。画像をクリックするとYoutube動画が自動再生されます。スクリプトは次のように機能します。

画像クリックで

  • Youtube iframe を autoplay: 1 に設定して置き換えます (ビデオを再生するため)。
  • 画像を隠す
  • 親 div の親 div を Youtube iframe の周りに表示する

* Youtube iframe の親 div には、.exit ボタンを持つ「.exit」という div があります。

.exit ボタンをクリックすると

  • Youtube iframe を autoplay: 0 に設定して置き換えます (ビデオを停止するため)。
  • 画像を表示
  • Youtube iframe の周りの親 div の親 div を非表示にします

Google Chrome と FireFox では魅力的に機能しますが、IE 9 & 10 ではビデオの音声が再生され続けます。.exit ボタンをクリックした後、Youtube iframe の親 div 全体を .remove() しても。IE Developer ツールでは、div 全体が消えているのがわかりますが、オーディオはまだ聞こえます。

コードの表示

これが私の関数のコードです。このようなスクリプトを作成したので、Youtube ID ごとに新しい .video-slide を html に貼り付けるだけで済みます。

HTML:

<div class="video-slide">
    <div class="preview-image">
        <img src="http://img.youtube.com/vi/%YOUTUBE_ID%/maxresdefault.jpg" alt="" />
    </div>
    <div class="yt-video">
        <div class="exit"></div>
        <div class="the-video">
            <iframe class="viddy" width="100%" height="500px" src="http://www.youtube.com/embed/%YOUTUBE_ID%?rel=0&showinfo=0" frameborder="no"></iframe>
        </div>
    </div>
</div>

JQuery:

/*YOUTUBE*/
jQuery(document).ready(function() {

    //Add uniq slide id to each .video-slide in the div .video-slider
    jQuery(".video-slider").children().each(function(i) {
        jQuery(this).addClass("id_" + (i+1));
    });

    //Add uniq slide id to each .video-slide in the div .video-slider
    jQuery(".video-slider").children().each(function(i) {
        jQuery(this).addClass("id_" + (i+1));
    });

    //Function for each video
    youtubeSlider = function(){
        jQuery('.preview-image', this).click(function() {
            var slideId = jQuery(this).closest('.video-slide').attr('class').split(' ')[1];
                slideIdClass = '.' + slideId;
                youtubeID = jQuery(slideIdClass + ' .preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery(slideIdClass + ' .viddy').attr('width');
                youtubeHeight = jQuery(slideIdClass + ' .viddy').attr('height');

                autoPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery(slideIdClass + ' .preview-image').hide();
                jQuery(slideIdClass + ' .yt-video').show();
        });

        var exitId = jQuery('.exit', this);
        jQuery(exitId).click(function() {

            var slideId = exitId.closest('.video-slide').attr('class').split(' ')[1];
                slideIdClass = '.' + slideId;
                youtubeID = jQuery(slideIdClass + ' .preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery(slideIdClass + ' .viddy').attr('width');
                youtubeHeight = jQuery(slideIdClass + ' .viddy').attr('height');

                stopPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery(slideIdClass + ' .preview-image').show();
                jQuery(slideIdClass + ' .yt-video').hide();
        });


        function autoPlayVideo(vcode, width, height){
          "use strict";
          jQuery(slideIdClass + " .the-video").html('<iframe class="viddy" width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=0&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
        }

        function stopPlayVideo(vcode, width, height){
          "use strict";
          jQuery(slideIdClass + " .the-video").html('<iframe class="viddy" width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'&loop=0&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
        }

    }
    jQuery(".video-slide").each(youtubeSlider);     

});

Youtube API については知っていますが、このスクリプトはほぼ完成しました。

だから私が知りたいのは、この問題を解決する方法はありますか?

どうもありがとう！

4

1 に答える 1

0

私はすでにそれを修正しました！

不思議なことに、IE は 2 回目に uniq 変数を読みませんでした。そのため、一意の ID を削除する必要がありました。各ビデオ スライドは最初に正しい iframe コードを取得するため、これは問題ではありませんでした (質問を読んでください: 画像をクリックしたとき - 置換..)。

だから私はこれを変更しました：

       var exitId = jQuery('.exit', this);
        jQuery(exitId).click(function() {

            var slideId = exitId.closest('.video-slide').attr('class').split(' ')[1];
                slideIdClass = '.' + slideId;
                youtubeID = jQuery(slideIdClass + ' .preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery(slideIdClass + ' .viddy').attr('width');
                youtubeHeight = jQuery(slideIdClass + ' .viddy').attr('height');

                stopPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery(slideIdClass + ' .preview-image').show();
                jQuery(slideIdClass + ' .yt-video').hide();
        });

これに：

     var exitId = jQuery('.exit', this);
        jQuery(exitId).click(function() {

            var youtubeID = jQuery('.preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery('.viddy').attr('width');
                youtubeHeight = jQuery('.viddy').attr('height');

                stopPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery('.preview-image').show();
                jQuery('.yt-video').hide();
        });
于 2013-04-26T14:38:05.320 に答える