Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

onpause event

Occurs when playback is paused.

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

Syntax

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

Event information

SynchronousNo
BubblesNo
CancelableNo

Event handler parameters

pEvtObj [in]

Type: Event

Standards information

Remarks

To invoke this event, do one of the following:

Examples

This example shows how to use the play event to change the label on a play button. To use it, click Play to start the video, and then click the play/pause button to see how it works.


<!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" onclick="playVideo(this);" style="width: 80px" >Play</button>
  <div >Elapsed Time: <span id="timeDisplay"></span></div>

   <script type="text/javascript">

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

          // 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);

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

     function playVideo(e) {      
       //  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();
       }

     }
     </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

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.