내 생중계가 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

봐이 재생됩니다. –

다음은 테스트되지 않았습니다. 한 가지 사전 - 임베디드 YouTube iframe과 같은 방식으로 html5 동영상 요소를 처리 할 수 없습니다. 동영상 요소가있는 경우 직접 요소와 상호 작용하고 이벤트 처리기를 사용하여 재생, 일시 중지 및 종료하여 요청을 처리 할 수 있습니다. 가능한 솔루션은 다음과 같이 보일 수 있습니다 : 직접 포함 된 요소를 제어 할 수 없기 때문에, 당신은 youtube API와 함께 작동하도록해야합니다

$(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); 
    }); 
});

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

// 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);

다음 스크립트 라이브러리를 통해 비디오를로드 대신 유튜브에서은 iframe을 사용하여, 당신은 (는 API 페이지에서 예) 같은 비디오를로드 할 API를 사용하여

이제 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() 및,468를 사용 발견).

비디오 태그에 onplay="" 및 onended=""을 추가 할 수 있습니다 (오디오 태그에서도 작동 함). onplay=""은 Blockreload() 함수를로드하고 onended="" 함수는 StartReload()을로드합니다.

그것은 다음과 같습니다 경우 비디오의 API, https://developers.google.com/youtube/iframe_api_reference 캡처하여 stateChange, 명확한 간격으로

<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 초마다 새로 고침됩니다. 비디오를 재생할 때 어떻게 새로 고침을 멈 춥니 까?

답변

관련 문제