CODEWITHSUNDEEP
javascripthtml5-video
neoflox
neoflox

Reputation: 227

How to pause a HTML5 video on an event?

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.

Upvotes: 14

Views: 53027

Answers (3)

Eugene Sue
Eugene Sue

Reputation: 1390

My personal favourite is a small onclick handler added to html attribute, like this:

<video onclick="this.paused? this.play() : this.pause()">

Upvotes: 4

fcalderan
fcalderan

Reputation:

since there are not traditional events on div hide/show you have to play() and pause() your video element when you call the functions that make your div appear/disappear

Upvotes: 0

Evan Mulawski
Evan Mulawski

Reputation: 55354

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

Upvotes: 35

Related Questions