Controlling audio, video tag playback using Javascript

Once you’ve embedded media into your HTML document using the new elements, you can programmatically control them from your JavaScript code.  For example, to start (or restart) playback, you can do this

<video src="video_test.ogg" autoplay></video> <script> function playVideo() { var V = document.getElementsByTagName('video')
  if (V.paused)
    V.play();
  else
    V.pause();
}
</script>
<input type=button onclick="playVideo()" value="Play or Pause"/>

You can also add events into the script:

V.addEventListener('ended', function () {
  alert('Video ended')
} );

Those events can be sent when handling media:

Event name Description
abort Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
canplay Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the CAN_PLAY readyState.
canplaythrough Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.
canshowcurrentframe The current frame has loaded and can be presented.  This corresponds to the CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Sent when the ready state changes to DATA_UNAVAILABLE.
durationchange The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
empty Sent when an error occurs and the media is empty.
ended Sent when playback completes.
error Sent when an error occurs.  The element’s error attribute contains more information.
loadedfirstframe The first frame of the media has finished loading.
loadedmetadata The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
loadstart Sent when loading of the media begins.
pause Sent when playback is paused.
play Sent when playback starts or resumes.
progress Sent periodically to inform interested parties of progress downloading the media. The progress event has three attributes:

lengthComputable
true if the total size of the media file is known, otherwise false.
loaded
The number of bytes of the media file that have been received so far.
total
The total number of bytes in the media file.
ratechange Sent when the playback speed changes.
seeked Sent when a seek operation completes.
seeking Sent when a seek operation begins.
suspend Requires Gecko 1.9.2 Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
timeupdate The time indicated by the element’s currentTime attribute has changed.
volumechange Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
waiting Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Incoming search terms:

  • javascript audio seek
  • html5 video tags autoplay delay
  • video tag javascript
  • javascript video tag
  • html5 audio seek
  • audio tag html5 volume
  • Javascript HTML5 video bytes loaded and total
Share
12 visitors online now
3 guests, 9 bots, 0 members
Max visitors today: 16 at 01:56 am UTC
This month: 74 at 04-21-2017 07:18 pm UTC
This year: 74 at 04-21-2017 07:18 pm UTC
All time: 513 at 06-01-2016 02:24 pm UTC
Get Adobe Flash player