2

YouTube iframe を ajax で追加しています (モーダル/ライトボックス レイヤー)。一つずつ。私はこれを行っているため（変更することはできません）、ドキュメントの準備ができている状態でYouTube APIを実行できません。iframe の ID を見つけるには、iframe が存在するときにスクリプトを追加して実行する必要があります。

最初の iframe ではすべて正常に動作します。ajaxでiframeを取得するときに、javascriptも追加します。

BUT：そのモーダルレイヤーを閉じて（パフォーマンス上の理由から、閉じますが、削除しません）、新しいビデオで別のレイヤーを開くと、YouTubeスクリプトをもう一度実行したいだけです。現在、2 つ目の YouTube API スクリプトを追加しても機能しません。

注: モーダルを閉じると、API でビデオが一時停止します。これは最初の iframe でのみ機能します。

私は何をすべきか？API を再初期化する実行する関数はありますか?

tsturzl を助けてくれてありがとう、でもうまくいかない。

モーダルを開き、コンテンツ (iframe やその他の要素を含む) を ajax で読み込みます。次に、YouTube API を実行し、ID を iframes ID に設定します。

モーダルを閉じると、player.pauseVideo(); を実行します。ビデオを一時停止します。モーダルは非表示になり (削除されず、ビデオは一時停止されます)、iframe はまだ html にあり、YouTube API の ID は「保存」されています。

今、別のYouTube iframeで別のモーダルを開きたいです（これもajaxでロードされています）。API を再度実行し、その ID を保存しようとするため、そのモーダルを閉じる (非表示にする) と、新しいビデオが一時停止しますが、機能しません。

それを行う方法はありますか？

注: これらのモーダルでは、ビデオは 1 つのプレビュー div に表示され、ユーザーは iframe を非表示/表示できます。彼らがそれを隠すと、ビデオは一時停止するはずです。iframe が非表示の場合、プレビュー div に画像が表示されます。

4

1 に答える 1

0

ないようですが、自分で再初期化できます。あなたがコードを提供しなかったので、ここでドキュメントのコードを参照します

初期化するには、「var player;」を作成します。これは、関数「onYouTubeIframeAPIReady()」でインスタンスを作成する変数です。おそらく、モーダルを作成するたびに iframe を再作成しているわけではありません。

モーダルボックスを行う方法は、コンテンツをJavaScriptの文字列に保存することである可能性があります。そのため、閉じるたびに div 要素がなくなるため、初期化した要素がないために youtube API がバグる可能性があります。

私の推測では、モーダルを開いたり閉じたりするたびに、iframes を作成および削除する必要があります (つまり、「プレイヤー」オブジェクト)。

残念ながら、その根拠となるコード スニペットがありません。あなたがほとんど情報を提供しなかったので。

だから私がしたいのは次のようなものです：



      var isReady=0;
      var player;
      function onYouTubeIframeAPIReady() {
        isReady=1;
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
      function onModalOpen(){
        if(isReady==1){
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
      }
      function onModalClose(){
        player=null;
      }

もちろん、iframe ごとに「プレーヤー」オブジェクトを作成する必要があります。また、各プレーヤー オブジェクトに対して onModalOpen/Close を呼び出す必要があります。これは、イベント ハンドラーに引数として渡すことができます。

于 2012-09-27T14:45:01.177 に答える