javascript

  • In case you have an video element you can interact with the DOM elements and use the eventhandlers for play, pause and end to handle your request.
  • Look into the API, developers.google.com/youtube/iframe_api_reference Capture statechange, clear interval in case video is playing.
  • Browse other questions tagged javascript jquery video refresh or ask your own question .
  • When I’m adding an embedded video (from Youtube) or an HTML5
  • 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.

0
down vote
favorite
I’ve made a live-feed for my website. Every 30 seconds the content reloads. But now I have a problem. When I’m adding an embedded video (from Youtube) or an HTML5

, I can’t play the video completely because of the reload. Is it possible to stop the auto reload when the video is playing, and restart the reload when the video has stopped?

The following is untested. One thing beforehand – you can’t handle an html5 video element the same way like an embedded youtube iframe. In case you have an video element you can interact with the DOM elements and use the eventhandlers for play, pause and end to handle your request. A possible solution could look something like this:

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

Since you can’t control embedded elements directly, you’ll need to work with the youtube API. Instead of using the iframe from youtube, you use the API to load the video like this (example from the API page):

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

Next you load the video via the script library:

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

Now you can interact with the youtube video:

function onPlayerStateChange(event) { // check if video is running… if (event.data == YT.PlayerState.PLAYING) { // disable interval blockReload(); } else { // restart interval startReload(); } }

javascript

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.