Skip to main content
play method

Loads and starts playback of a media resource.

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




This method has no parameters.

Return value

This method does not return a value.

Standards information


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

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.


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>
    <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" /> -->
  <h1>Video controls example</h1>
<video id="video1" controls >HTML5 video is not supported</video><br />
<input type="text" id="videoFile" size="60"  value="" />
  <button id="play">Play</button>
  <button id="controls">Hide controls</button>

       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
  = "Show controls";
         } else {
           // Controls are binary, true if there, false if not
           video.setAttribute("controls", true);
  = "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;

         } else {
       }, false);

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

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



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