CODEWITHSUNDEEP
javascripthtml
Jason
Jason

Reputation: 233

Javascript - Play/ Pause button for video

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.

Upvotes: 0

Views: 2666

Answers (4)

Lal
Lal

Reputation: 14810

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";
        }
    }
}

Upvotes: 2

Nicolo
Nicolo

Reputation: 1650

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.

Upvotes: 0

Jordan McArdle
Jordan McArdle

Reputation: 125

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();
});

Upvotes: 0

Nerdy
Nerdy

Reputation: 192

HTML5 contains a built-in attribute for video controls.

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

Upvotes: 0

Related Questions