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

Question

我已经为我的网站制作了实时供稿。每 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。您不使用 youtube 的 iframe，而是使用 API 加载视频（来自 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>

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

My livefeed reloads every 30 seconds. How stop refresh when playing video?

javascript

video

jquery

refresh