Pause playback on video scrolled out of view

[jfroelich]

Figure out a way to pause playback on any embedded playing videos when user scrolls past them.

[jfroelich]

Example of an embedded flash movie object in HTML (irrelevant parts removed) (embed might also be irrelevant):

<object id="movie">
  <embed name="movie">
</object>

Example javascript:

var movieElement = document.getElementById('move');
movieElement.play();//play the movie
movieElement.stopPlay();//pause the movie

• Does this work for all objects though?

[jfroelich]

According to http://stackoverflow.com/questions/328194/controlling-a-flash-player-using-javascript, "it's only possible if the SWF you are using implements the ExternalInterface with documented functions"

[jfroelich]

For youtube see https://developers.google.com/youtube/js_api_reference?csw=1#Playback_controls. It provides player.pauseVideo().

Maybe I could get the element, and then test for various things

var video = findVideo(content);
if(video.stopPlay) {
 video.stopPlay();
} else if(video.pauseVideo) {
 video.pauseVideo();
}

Vimeo also has its own API. While I can assume there are certain popular platforms I would have to write custom code for each one which is frustrating.

[jfroelich]

One approach is to assume the videos are generally embedded in embedded iframes. If that is the general case, I could remove the src attribute when out of view, and add it back when in view. It resets the frame content and reloads it but maybe that is ok?

[jfroelich]

Mozilla example about the page-visibility API and pausing. This uses a video element directly inside the page. See https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API.

Note: page visibility applies to the entire page (e.g. user switches to another tab). This is not about element visibility. If I want element visibility, check if I can do something like find out that css visible property changed. See http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling

I still have to consider iframes. I could listen to visibility change for both iframes and video elements. If iframe I could just swap out the source or something to that effect.

[jfroelich]

One crazy idea is that in order to get arond the CSP issue I could rewrite the various video embeds all to just use the new video element, and then it becomes pretty easy.