Read more

The HTML5 video element

Dominik Schöler
July 09, 2020Software engineer at makandra GmbH
# Basic HTML example
<video poster="preview_image.png" controls>
  <source src="or_here.webm" type="video/webm" />
  <source src="alternative_if_browser_cant_pay_first_source.mp4" type="video/mp4" />
  <track src="optional_subtitles.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
</video>

# Javascript API (notable methods and properties)
video = document.querySelector('video')
video.play()
video.pause()
video.load() // Reset to the beginning and select the best available source
video.currentSrc // The selected source
video.currentTime // The current playback time (in seconds)
video.ended // Whether the video has finished
video.muted
video.paused
video.readyState // See comments
video.volume

Comments

  • controls makes the browser show its own video controls
  • The image given in poster will be shown before the video was loaded/has started (and if the video cannot be loaded at all).
  • The browser will play the first source it can play (some video types are not supported in every browser). The video can also be given as src on the video element; however, this excludes the handy fallback mechanism.
  • The track element can be used to add either captions, subtitles, chapters, descriptions or similar metadata.
  • If the video has not started to play and has not been seeked, currentTime is the video's initial playback time. Setting this value seeks to the new time.
  • readyState returns a value in [0:4] indicating its state Show archive.org snapshot .

Caveats

  • On iOS, the video.preload attribute is ignored. iOS seems to always load the full video once it has a src.
  • When creating a video element with document.createElement('video'), setting the muted attribute will not mute the video! Use video.muted = true instead.

Resources

Full Documentation on the video element

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot
Dominik Schöler
July 09, 2020Software engineer at makandra GmbH
Posted by Dominik Schöler to makandra dev (2020-07-09 11:58)