以下是未经测试的。事先做好一件事 - 你不能像嵌入式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();
}
}
查找到API,https://developers.google.com/youtube/iframe_api_reference捕获statechange,清晰的情况下,视频间隔播放。 –