Compartilhar via


onplay event

Occurs when the play method is requested.

 

Syntax

HTML Attribute <element onplay = "handler(event)">
Event Property object.onplay = handler;
addEventListener Method object.addEventListener("play", handler, useCapture)

 

Event information

Synchronous No
Bubbles No
Cancelable No

 

Event handler parameters

  • handler [in]
    Type: function

    Event handler object.

Standards information

Remarks

To invoke this event, do one of the following:

  • Call the play method.
  • Click the play button on the embedded media controls.

Examples

This example shows how to use the play event to change the label on a play button. To use it, start the video, and then click the play/pause button. The Play and Pause button labels are driven by the play event.

<!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="ie9" />  -->        
</head>
<body>
<video id="video1" >
   HTML5 video is not supported
</video><br />

<input type="text" id="videoFile" style="width:600px" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4"/>
  
  <!-- Button width set so overall size doesn't change when we toggle the label -->
  <button id="playButton" style="width: 80px" >Play</button>
  <div >Elapsed Time: <span id="timeDisplay"></span></div>

   <script>

     var oVideo = document.getElementById("video1");      //video element
     var button = document.getElementById("playButton");
     var display = document.getElementById("timeDisplay");

     //  Capture time changes and display current position
     oVideo.addEventListener("timeupdate", function () {
       display.innerText = oVideo.currentTime.toFixed(2) ;
     }, false);

     button.addEventListener("click", function () {
       //  toggle between play and pause based on the paused property
       if (oVideo.paused) {
         var oInput = document.getElementById('videoFile');   //text box
         if (oInput.value) {
           //  only load a video file when the text field changes
           if (oInput.value != oVideo.src) {
             oVideo.src = oInput.value;
             oVideo.load();
           }
           oVideo.play();
         }
       } else {
         oVideo.pause();
       }
     }, false);

     // Capture the play event and set the button to say pause
     oVideo.addEventListener("play", function () {
       button.innerHTML = "Pause";
     }, false);

     // Capture the pause event and set the button to say play
     oVideo.addEventListener("pause", function () {
       button.innerHTML = "Play";
     }, false);


     </script>
</body>
</html> 

See also

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

onplaying