Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

load method

Resets the audio or video object and loads a new media resource.

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

 

Syntax

object.load()

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

Remarks

This method causes any pending tasks or events to be discarded. Use this method when changing URLs on an audio or video object where the source element was used to initially set the media.

Examples

This example shows how to use the load method to change a video. To use it, start the video, and then put a different video address into the text field, and press Play. This example doesn't use the source element, but uses load to reset the video element to start playing a new video.


<!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

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