HTML5 video play / pause issues

Question

I have html5 video on webpage. But I want it to be pause / play on video itself but not clicking on video controls like volume etc.

Thanks in advance for your precious help

score 1 · Answer 1 · edited May 23 '17 at 12:32

HTML5 <video> tag does not allow this option by default. However, you can use javascript to control your video (make it react to various events).

Here are few links that deals with these issues:

Try any of the approaches in these arcitcles and it should be easy - and try showing some of your code when asking a question - it will make it easier for us to give you more detailed answer :-)

For example, you can add some onClickEvent to your video or its container and then write js function to stop the video (by accessing it with its id)...

score 0 · Answer 2 · answered Jul 29 '13 at 09:50

0

Here is what you can do

var myVideo = document.getElementById("video1");

/*
 * for playing and pausing the video
 */
function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
}

HTML

<button onclick="playPause()">Play/Pause</button>
<video id="video1" width="420">
    <source src="resources/videos/your_video.webm" type="video/webm">
            Your browser does not support HTML5 video.
    </source>
</video>

Hope this solves your problem.

answered Jul 29 '13 at 09:50

roger_that

9,493
18
66
102

Thanks. But can I use html5 video default controls for this instead of creating custom button for playpause ? – Amit Khanna Aug 08 '13 at 05:20
As you might see the definition of the javascript functions, only the default controls for play and pause. – roger_that Aug 08 '13 at 12:27

HTML5 video play / pause issues

2 Answers2