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

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

这是我使用的重载：

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

你可以视频我在这里活饲料。

来源

2016-12-29 Maarten De Moor

查找到API，https://developers.google.com/youtube/iframe_api_reference捕获statechange，清晰的情况下，视频间隔播放。 –

以下是未经测试的。事先做好一件事 - 你不能像嵌入式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(); 
    } 
}

来源

2016-12-30 00:49:07

我发现这个解决方案通过试错（我用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>

来源

2016-12-31 13:22:30

axel.michel的工作看起来很有帮助，所以我建议给予他或她一点时间和精力，因为它会让你找到解决方案。 – halfer

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

回答

相关问题