4

YouTube の iFrame API を埋め込んだ YouTube ビデオがあります。私はしたいと思います：

  • ユーザーがビデオを一時停止したときに半透明のオーバーレイを表示する (WORKS)
  • ユーザーがビデオを再生するときにそのオーバーレイを非表示にする (WORKS)
  • ユーザーが YouTube コントロールを介して「シーク」しているときにオーバーレイを表示しない (可能性はありますか?)

シーク動作の制御に問題があります。出来ますか？

再現するには、シークを同じ位置で数秒間保持し、オーバーレイが表示されるのを確認します。jsfiddle の例はこちら: http://jsfiddle.net/dNU84/3/

var ytvideo;
window.onYouTubePlayerAPIReady = function () {
    ytvideo = new YT.Player('ytvideo', {
        width: '400',
        height: '300',
        videoId: 'BOksW_NabEk',
        playerVars: {
            'autoplay': 1,
            'controls': 1
        },
        events: {
            "onStateChange": onPlayerStateChange
        }
    });
}

function showOverlay() {
    if ($('.video .video-overlay').length) $('.video .video-overlay').fadeIn(1200);
}

function hideOverlay() {
    if ($('.video .video-overlay').length) $('.video .video-overlay').hide();
}

var overlay;
function onPlayerStateChange(event) {
    console.log(event.data);
    clearTimeout(overlay);

    // youtube fires 2xPAUSED, 1xPLAYING on seek
    if (event.data == YT.PlayerState.PAUSED) {
        overlay = setTimeout(showOverlay, 1000);
    }
    if (event.data == YT.PlayerState.PLAYING) {
        overlay = hideOverlay();
    }
}
4

2 に答える 2

5

この質問が古いことは知っていますが、一時停止時にオーバーレイを表示するため、これに対する解決策を探していましたが、両方のイベント値が 2 であるため、ユーザーがシークするたびにオーバーレイが表示されていました。

私が遭遇した最も簡単な解決策は、1 秒のタイムアウトを設定することです。

setTimeout(function() {
  if ( event.target.getPlayerState() == 2 ) {
    // execute your code here for paused state
  }
}, 1000)

これは一時停止状態でのみコードを実行し、シークでは実行しません。これは、ユーザーがシークしている場合、1 秒のタイムアウト後に PlayerState が再び 1 になるためです。

于 2016-11-01T15:21:44.770 に答える