Posted about 1 month ago. Visible to the public.

The HTML5 video element

Copy
# 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.

Browser quirks

  • Mobile Safari requires a poster to be set and shows an error otherwise

Resources

Full Documentation on the video element

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
17 days ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more