play method

Loads and starts playback of a media resource.

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

Syntax

object.play()

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

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.

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> 


See also

audio element
audio object
media element
video element
video object
How to use HTML5 to play video files on your webpage
How to use HTML5 to Add an Audio Player to your Webpage
Make your videos accessible with Timed Text Tracks

 

 

Show:
© 2014 Microsoft