HTML Video Element
I want to read more about the HTML video element. I am looking into how to make the size responsive.
References
Related
- Web Video Text Tracks (WebVTT)
- WebVTT are text tracks providing specific text
cues
that are time-aligned with other media, such as video or audio tracks. The WebVTT API provides functionality to define and manipulate these text tracks. The WebVTT API is primarily used for displaying subtitles or captions that overlay with video content, but it has other uses: providing chapter information for easier navigation and generic metadata that needs to be time-aligned with audio or video content. - A text track is a container for time-aligned text data that can be played in parallel with a video or audio track to provide a translation, transcription, or overview of the content. A video or audio media element may define tracks of different kinds or in different languages, allowing users to display appropriate tracks based on their performance or needs.
- The different kinds of text data that can be specified (but not necessarily supported by all browsers) are:
subtitlesprovide a textual translation of spoken dialog. This is the default type of text track, and, if used, the source language must be specified.captionsprovides transcription of spoken text, and may include information about other audio such as music or background noise. They are intended for hearing impaired users.chaptersprovide high level navigation information, allowing users to more easily switch to relevant content.metadatais used for any other kinds of time-aligned information.
- The individual time-aligned units of text data within a track are referred to as "cues". Each cue has a start time, end time, and textual payload
- The
::cueCSS pseudo-element can be used both in HTML and in a WebVTT file to style the cues for a particular element, for a particular tag within a cue, for a VTT class, or for a cue with a particular label. The::cue-regionpseudo-element is intended for styling cues in a particular region, but is not supported in any browser.
- WebVTT are text tracks providing specific text
WEBVTT
00:00.000 --> 00:00.900
Hildy!
00:01.000 --> 00:01.400
How are you?
00:01.500 --> 00:02.900
Tell me, is the lord of the universe in?
00:03.000 --> 00:04.200
Yes, he's in - in a bad humor
00:04.300 --> 00:06.000
Somebody must've stolen the crown jewels
Notes
The<video>HTML element embeds a media player which supports video playback into the document. You ca use<video>for audio content as well, but the <audio>elementmay provide a more a more appropriate user experience.
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>
Similarly to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height; whether we want it to autoplay and loop, or to show the browser's default video controls, etc.
Browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will use the first one it understands.
- If you don't specify the
controlsattribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and theHTMLMediaElementAPI. - There are many events for the video element.
- You can use the
object-positionproperty to adjust the positioning of the video within the element's frame, and theobject-fitproperty to control how the video's size is adjusted to fit within the frame. - To show the subtitles/captions along with your video, you can use some JavaScript along with the
<track>element and the WebVTT format. - You can play audio files using a
<video>element. This can be useful, if, for example, you need to perform audio with aWebVTTtranscript, since the audio element doesn't allow captions using WebVTT, - To test the fallback content on browsers that support the element, you can replace
<video>with a non-existing element like<notavideo>.
The <video> element is a replaced element - its display value is inline by default - but its default width and height in the viewport is defined by the video being embedded. There are no special considerations for styling <video>; a common strategy is to give it a display value of block to make it easier to position, size, etc., and then provide styling and layout information as required.
Comments
You have to be logged in to add a comment
User Comments
There are currently no comments for this article.