2

さまざまなことを試しましたが、非表示のDIVでYouTubeビデオを取得して、DIVトグルがクリックされる前にバックグラウンドでの再生を停止することができません。可視性：非表示は問題を解決していないようです。これが私が使用しているコードです。誰かが助けてくれることを願っています！自動再生をオフにして解決することはできますが、それはユーザーが余分なボタン（YouTubeの「再生」ボタン）をクリックする必要があることを意味します。これは理想的ではありません。

** Webページの：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".productDescription").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    return false;
    });

});

</script>

**体内：

<div class="productDescription">

<iframe width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0" frameborder="0" allowfullscreen></iframe> 
<div class="closebutton"><a href="index.php" onClick="javascript:location.replace(this.href);" class="show_hide">Close Video</a>
</div>
</div>

**およびスタイルシート内：

.productDescription {
display: block;
position:absolute;
left:0px;
top:-2px;
z-index:5;
background-color: #000;
margin: 0px;
float: left;
padding: 0px;
width: 715px;
min-height: 600px;
height: 600px;
}

.show_hide {
display:none;
}

.closebutton {
display: block;
width:120px;
height: 22px;
position:absolute;
left:20px;
top:50px;
background-color: #000;
padding-top: 3px;
float: left;
z-index: 9999;
}

よろしくお願いします！

4

2 に答える 2

7

自動再生機能は、divが表示されているか非表示になっているかに関係なく、ビデオが読み込まれるとビデオの再生を開始します。

ただし、自動再生設定を削除すると、YouTube APIを使用して動画を制御できるため、ユーザーがクリックしてdivを表示したときに動画の再生が開始されます。1つのオプションはiframeAPI（すでにiframeを使用してビデオを埋め込むため、これをお勧めします。これにより、視聴者がモバイルデバイスを使用している場合、YouTubeはフラッシュビデオではなくHTML5ビデオを提供できます）です。JavaScriptAPI。_

詳細をお伺いしたので、YouTubeiFrameAPIを使用してニーズを満たす方法について簡単に説明します。何が起こっているのかを理解し、必要に応じて適応できるように、ドキュメントを読むことをお勧めします。

まず、HTMLで上記と同じ方法でiframeビデオを作成しますが、iframeのIDとiframesrcのoriginパラメーターの2つを追加します。（originパラメーターは、YouTubeプレーヤーをJavaScriptのハッキングから保護するのに役立ちます。）したがって、次のようになります。

<iframe id="player" width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0&origin=http://example.com/" frameborder="0" allowfullscreen></iframe>

example.comのURLを、このページが表示されるWebサイトに置き換えます。

iframeの後、</body>タグの前に、次のコードを追加してAPIを読み込み、プレーヤーを初期化します。

  <script>
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player');
  }
</script>

次に、JavaScriptで、$（'。productDescription'）。slideToggle（）を読み取る行の直前に、次のコードを追加します。

  if ($('.productDescription').is(':visible')) {
       player.pauseVideo();
      }
  else {
       player.playVideo();
      }

このコードは、.productDescriptiondivが表示されているかどうかをテストします。非表示の場合、ビデオが開始され、divが表示されます。表示されていない場合は、ビデオを一時停止し、divを非表示にします。

それはそれをする必要があります。

于 2012-12-03T11:28:36.407 に答える
0

同じ問題がありますが、これで修正できます。YouTubeAPIを参照してください。直接実装することはできません。このように編集します。

ステップ1 ：loadYTScript（）関数を作成し、youtubeAPIコードを配置します。

ステップ2：関数をonYouTubeIframeAPIReady（）で呼び出します。次に、onclickでload関数を呼び出します。これがあなたのjsコードです：

function loadYTScript(){
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];

                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    
                }
        function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {                                         
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
                        events: {
                            'onReady': onPlayerReady,
                          }
                    });
                }
                function onPlayerReady(event) {
                    event.target.playVideo();
                }
                jQuery(document).ready(function()    {
                $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    loadYTScript();
    });
    });

HTMLで追加することを忘れないでください

<div class="productDescription">        
            <div id="player"></div>
        </div>

それがうまくいくことを願っています。

于 2014-02-05T04:42:05.893 に答える