pause method

Article
05/02/2017

Pauses the current playback and sets paused to TRUE. This can be used to test whether the media is playing or paused. You can also use the pause or play events to tell whether the media is playing or not.

Syntax

object.pause();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.8

Examples

This example plays a video file, and toggles the play button to pause when playing, and back when paused. Enter a compatible video url into the text box. For Internet Explorer use an MP4 format file.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Video Example</title>
      <!-- Uncomment the following tag when developing on a local or intranet computer -->
      <!-- <meta http-equiv='X-UA-Compatible' content="IE=edge" /> -->
</head>
<body>
  <h1>Video controls example</h1>
<video id="video1" controls >HTML5 video is not supported</video><br />
<input type="text" id="videoFile" size="60"  value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
  <button id="play">Play</button>
  <button id="controls">Hide controls</button>

     <script>
       var video = document.getElementById('video1');
       var playbutton = document.getElementById("play");
       
       document.getElementById("controls").addEventListener("click", function (e) {
         // Set controls to true or false based on their current state
         
         if (video.controls == true) {
           // Controls are binary, true if there, false if not
           video.removeAttribute("controls");
           e.target.innerHTML = "Show controls";
         } else {
           // Controls are binary, true if there, false if not
           video.setAttribute("controls", true);
           e.target.innerHTML = "Hide controls";
         }
       }, false);

       playbutton.addEventListener("click", function (e) {       
         //  Toggle between play and pause based on the paused property
         if (video.paused) {
           var input = document.getElementById('videoFile');   //text box
           if (input.value) {
             //  Only load a video file when the text field changes
             if (input.value != video.src) {
               video.src = input.value;
             }
             video.play();
           }

         } else {
           video.pause();           
         }
       }, false);

       video.addEventListener("play", function () {
         playbutton.innerHTML = "Pause";
       }, false);

       video.addEventListener("pause", function () {
         playbutton.innerHTML = "Play";
       }, false);

     </script>

</body>
</html>

Share via