Question

我为我的网站制作了一个实时Feed。内容每30秒重新加载一次。但现在我有一个问题。当我添加嵌入视频（来自Youtube）或HTML5 <video>时，由于重新加载，我无法完全播放视频。是否可以在视频播放时停止自动重新加载，并在视频停止时重新启动重新加载？

这是我用于重新加载的内容：

$(document).ready(function() {
    $("#updates").load("updates.php");
    var refreshId = setInterval(function() {
        $("#updates").load('updates.php' + '?randval=' + Math.random());
    }, 30000);
    $.ajaxSetup({
        cache: false
    });
});

您可以在此处观看我的实时视频。

Answer 1

以下是未经测试的。事先有一件事 - 你不能像嵌入式youtube iframe那样处理html5视频元素。如果您有视频元素，则可以直接与其进行交互，并使用事件处理程序进行播放，暂停和结束以处理您的请求。可能的解决方案可能如下所示：

$(function() {
    var refreshId;
    // collection of all video elements on your page
    var videos = $('video');

    // disable reload by clearing the interval
    function blockReload() {
        clearInterval(refreshId);
    }

    // your existing reload function
    function startReload() {
        refreshId = setInterval(function() {
            $("#updates").load('updates.php' + '?randval=' + Math.random());
        }, 30000);
    }

    // loop over all video elements on your page and bind
    // three event handlers, one for playing, one for pausing
    // and one for an ended video.
    videos.each(function() {
        this.addEventListener('playing', blockReload);
        this.addEventListener('paused', startReload);
        this.addEventListener('ended', startReload);
    });
});

由于您无法直接控制嵌入式元素，因此您需要使用youtube API。您可以使用API加载视频，而不是使用youtube中的iframe（例如，从API页面开始）：

// This code loads the IFrame Player API code asynchronously.
// you could also use a normal script tag in that case you would load 
// the lib each time.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

接下来，您将通过脚本库加载视频：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360'
    width: '640',
    videoId: 'YOURVIDEOID',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

现在您可以与YouTube视频进行互动：

function onPlayerStateChange(event) {
  // check if video is running...
  if (event.data == YT.PlayerState.PLAYING) {
    // disable interval
    blockReload();
  } else {
    // restart interval
    startReload();
  }
}

Answer 2

我通过反复试验找到了这个解决方案（我使用了axel.michel的函数Blockreload()和StartReload()）。

您可以将onplay=""和onended=""添加到视频标记中（它也适用于音频标记）。 onplay=""加载函数Blockreload()，onended=""加载函数StartReload()。

看起来像这样：

<video id="test" onplay="BlockReload()" onended="StartReload()" width="800" controls>
   <source src="*video source*"> 
   Jouw browser ondersteund onze videoplayer niet. 
</video>

我的livefeed每30秒重新加载一次。播放视频时如何停止刷新？

2 个答案: