CSS play - Vimeo videos - autopause for all browsers
9th June 2014
For all the latest browsers including IE8+
An autopause function so that only one video at a time can be played and if a playing video goes off screen then it pauses, and continues playing when moved back on screen.
videos copyright © stu nicholls - CSS play
I have been playing with Vimeo videos over the last few weeks and although it is excellent for its ease of use in playing videos in all browsers and on all platforms, it does lack a few 'features'.
For instance it has 'autopause' built in which only allows one video to be playing at any time, BUT this does not work in Internet Explorer. Also, when a playing video goes off screen it continues to play.
I have searched the web for answers to these problems but could not find any, and the information on the Vimeo site is not much help. So I decided to write my own script using jQuery and Froogaloop and this is the result.
Please ignore the quality of the videos as I do not claim to be an expert. These were taken on a recent visit to WWF at Slimbridge and demonstrate the features that I have added.
1. Only one video at a time can play, even on IE8+, so clicking another video play button when another video is playing will pause the playing video.
2. If a video is playing and it is scrolled off the browser window then the video will pause. It will continue again when it is scrolled back into the browser window.
3. If a playing video is scrolled off the browser window it will pause, but if another video is then selected the 'paused' video will stay paused when scrolled back into the brwser window.
4. If the window is resized such that a playing video is moved off the browser window then it will 'pause'. Again it will continue playing if it is moved back into the browser window.
5. No setup is required. All you need to do is ensure that the jQuery and Vimeo Froogaloop scripts are loaded and that the vimeo iframe has 'vime; as part of the 'src' code.
The jQuery routine should be fairly easy to follow and makes use of the 'paused' function to find any playing videos.
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.