Javascript - Play/ Pause button for video

Question

For my university work I have to make video controls and I'm trying to implement a play/pause button to start with but it doesn't work. Here is my code:

HTML:

<script src="Scripts/VideoScript.js"></script>
<section id="Example_Video_Container">
    <video width = 576 height = 432 id = "Example_Video">  
        <source src="Videos/Example_Video.mp4">
        <source src="Videos/Example_Video.webm">
    </video>
    <div id="Example_Video_Controls">
        <button type="button" id="Play_Pause" >Play</button>
    </div>
</section>

JavaScript:

window.addEventListener (“DOMContentLoaded”,handleWindowLoad) 
function handleWindowLoad ()
{
    var Video = document.getElementById ( "Example_Video" );
    var PlayButton = document.getElementById ( "Play_Pause" );
    var MuteButton = document.getElementById ( "Mute_Unmute" );
    var Slider = document.getElementById ( "Slider" );

    PlayButton.addEventListener ( "click", Play_Pause_Video ) ;

    function Play_Pause_Video ()
    {
        if (Video.paused === true)
        {
            Video.play();
            PlayButton.innerHTML = "Pause";
        }
        else
        {
            Video.pause();
            PlayButton.innerHTML = "Play";
        }
    }
}

I have checked my file paths too, they should be all ok.

Possible duplicate of [play pause html5 video javascript](http://stackoverflow.com/questions/10327907/play-pause-html5-video-javascript) — The Beast, Dec 02 '15 at 18:06
Notice the `“` in `window.addEventListener (“DOMContentLoaded”,handleWindowLoad) `. It is not the actual `"` that javascript recognizes. Replace it with `"`. — Lal, Dec 02 '15 at 18:24
Thanks, i tried that and that also worked, very easy fix thankyou — Jason, Dec 02 '15 at 19:12

score 2 · Answer 1 · answered Dec 02 '15 at 18:33

See this fiddle

Your code was working perfectly. you was getting an Uncaught SyntaxError: Unexpected token ILLEGAL in the browser console, which was due to the “.

Notice the “ in window.addEventListener (“DOMContentLoaded”,handleWindowLoad) . It is not the actual " that javascript recognizes. Replace it with ". Thus the JS code would be like

window.addEventListener ("DOMContentLoaded",handleWindowLoad);
function handleWindowLoad ()
{
    var Video = document.getElementById ( "Example_Video" );
    var PlayButton = document.getElementById ( "Play_Pause" );
    var MuteButton = document.getElementById ( "Mute_Unmute" );
    var Slider = document.getElementById ( "Slider" );

    PlayButton.addEventListener ( "click", Play_Pause_Video ) ;

    function Play_Pause_Video ()
    {
        if (Video.paused === true)
        {
            Video.play();
            PlayButton.innerHTML = "Pause";
        }
        else
        {
            Video.pause();
            PlayButton.innerHTML = "Play";
        }
    }
}

score 0 · Answer 2 · answered Dec 02 '15 at 18:10

0

HTML5 contains a built-in attribute for video controls.

Look at this page for help: http://www.w3schools.com/tags/att_video_controls.asp

answered Dec 02 '15 at 18:10

Nerdy

172
4
14

i know i can just add "controls" to the video tag but the task is to make my own – Jason Dec 02 '15 at 18:16

score 0 · Accepted Answer · answered Dec 02 '15 at 18:12

0

Check your console for errors. I noticed one -

Javascript Error: 'missing ) after argument list"

To get around that, replace window.addEventListener()

with:

document.addEventListener("DOMContentLoaded", function(event) {
    handleWindowLoad();
});

answered Dec 02 '15 at 18:12

Jordan McArdle

125
1
7

i tried that and nothing happened, did it work for you? – Jason Dec 02 '15 at 18:15
1

oh it does work when i copied that, thanks very much :) – Jason Dec 02 '15 at 18:27
2

see my answer @JordanMcArdle – Lal Dec 02 '15 at 18:33

score 0 · Answer 4 · answered Dec 02 '15 at 18:33

Code is technically correct and it should work fine, but there is one little mistake.

21:17:37.737 SyntaxError: illegal character1 VideoScript.js:1:26

In your VideoScript.js, 26th character is illegal at line 1.

window.addEventListener (“DOMContentLoaded”,handleWindowLoad)

remove this weird double quotes (“ ”) and replace it with normal ones (" ") and it will work fine :)

window.addEventListener ("DOMContentLoaded",handleWindowLoad)

This is why you should use debugging tools.

Here is some tips to find out small mistakes like that:

If you use FireFox click Ctrl+Shift+J and open Browser Console window;
Refresh your tab where your problematic HTML file is loaded;
Check Browser Console and you will see if there is any error;
Copy error and Google it.

Javascript - Play/ Pause button for video

4 Answers4

See this fiddle