# 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
controls
makes the browser show its own video controlsposter
will be shown before the video was loaded/has started (and if the video cannot be loaded at all).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.track
element can be used to add either captions, subtitles, chapters, descriptions or similar metadata.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
.video.preload
attribute is ignored. iOS seems to always load the full video once it has a src
.document.createElement('video')
, setting the muted
attribute will not mute the video! Use video.muted = true
instead.autoplay
attribute.