Menu
I am building a website with HTML5-<video> in fullscreen background. There are pages in shape of <div>s becoming visible with SWF-container player in them that cause serious CPU performance issues when both media play.
So I want to add a simple javascript command that pauses the background video when a project-<div> becomes visible. Would be nice if it resumes again the playback when it gets closed/hidden.
Thanks in advance.
377
HTML | DOM Audio pause() Method The HTML DOM Audio pause() Method is used to pause the currently playing audio. To use the audio pause() method, one must use the controls property to display the audio controls such as play, pause, volume, etc, attached on the audio.
HTML Audio/Video DOM pause() Method The pause() method halts (pauses) the currently playing audio or video.
Chrome doesn't have this feature built-in. It's possible to prevent many HTML5 videos on the web from automatically playing by installing the Stop YouTube HTML5 AutoPlay browser extension from the Chrome Web Store. Despite its name, this should work with all websites — not just YouTube.
You can't pause event listeners. What you can do, is to set a flag variable when a modal is opened, and in listeners check, if the flag is set. Then reset the flag when closing the modal. You can also detach events when opening a modal, and attach again when closing it.
document.getElementById('myvideotag').pause();
Note that there is no stop() method. In the function that shows/hides your DIV, place the play/pause function there.
More resources here: http://www.digitaria.com/blogs/html5-video-skinning-tutorial-part-2-play-buttons
60
My personal favourite is a small onclick handler added to html attribute, like this:
<video onclick="this.paused? this.play() : this.pause()">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
