play method

Article
05/02/2017

Loads and starts playback of a media resource.

Syntax

object.play();

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

Remarks

To set or change the URL that is currently playing, assign it to src property. When using a source element to initially set the media, assign the new URL to the src property, and then call load before calling play.

// changing the current source URL
video.src = "demovideo.mp4";
video.load();
video.play();

The play method sets the paused property to FALSE when playing. 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.

To improve interoperability with other popular browsers, Internet Explorer for Windows Phone 8.1 Update supports the play method only in response to direct user input.

Note If you are developing locally or on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Windows Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

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>