0

ユーザーがブラウザの別のタブをクリックしたときにビデオを一時停止したいと思います。私はYoutubeとVimeoでこれをやろうとしました。

これは、javascript の背後にある基本的な考え方です。

ユーチューブの場合:

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

var youtubePlayer;
var onYouTubeIframeAPIReady = function() {
 youtubePlayer = new YT.Player('youtube', {
   height: '390',
   width: '640',
   videoId: 'sXtekwuT8R0',
   events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
   }
 });
};

var onPlayerReady = function(event) {
 event.target.playVideo();
};

var onPlayerStateChange = function(event) {
 if (event.data == YT.PlayerState.PLAYING) {
  parent.focus();
   window.onblur = function() {
     status.text("You went away!");
     youtubePlayer.stopVideo();
   };
 }
};

Vimeo の場合 (Froogaloop ライブラリを使用):

$(function() {
  //Vimeo
  var iframe = $('#vimeo');
  var vimeoPlayer = $f(iframe[0]);
  var status = $('#status');

  vimeoPlayer.addEvent('ready', function() {
    vimeoPlayer.addEvent('play', function(){
      status.text("Playing!");
      parent.focus();
      window.onblur = function() {
        status.text("You went away!");
        vimeoPlayer.api("pause");
      };
    });
  });
});

これらの試行のいくつかの codepen の例を次に示します。

ユーチューブ: http://codepen.io/earlonrails/pen/jugAm

Vimeo: http://codepen.io/earlonrails/pen/KBAmd

再生ボタンをクリックした後、iframe の親ドキュメントをクリックしてから、別のウィンドウまたはタブをクリックすると、両方の例が機能します。Youtube の例も最初に読み込まれたときに機能しますが、再生をクリックしてから一時停止してから再生すると機能しません。これらの問題は両方とも、iframe をクリックしていることが原因であると考えられます。そのため、イベントが同時にトリガーされるか、イベントをそこでキャプチャできないためにトリガーできません。iframe を介して送信された postMessages とコールバックを使用すると、これが機能すると思いましたが、残念ながら、これを理解できませんでした。

4

1 に答える 1

1

イベント コールバックを追加する前に現在のウィンドウを設定し、このウィンドウ変数をコールバック関数で使用する必要があります。IE

var myWindow = window;
vimeoPlayer.addEvent('play', function(){
  status.text("Playing!");
  myWindow.focus();
  myWindow.onblur = function() {
    status.text("You went away!");
    vimeoPlayer.api("pause");
  };
});

これらは、以前にリンクされた codepen の例で確認およびテストできます。

ユーチューブ: http://codepen.io/earlonrails/pen/jugAm

Vimeo: http://codepen.io/earlonrails/pen/KBAmd

iframe でクリックしたときのウィンドウは、iframe ウィンドウで onblur を設定していると思いますが、それは決して呼び出されませんが、iframe で再生をクリックしてからページの本文をクリックしてから、その理由をまだ説明できません。別のタブをクリックすると機能します。おそらく、コールバックが iframe から複数回起動されているか、postMessage が起動されているか、まだバッファ内にある可能性があります。

于 2014-09-29T20:40:39.053 に答える