我的飼料每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秒重新加載一次。播放視頻時如何停止刷新？

回答

相關問題