Going beyond images with basic video for the web | web.dev, Hacker News

tag, point to a source, and then you’re off to the races!

SRC="myVideo.mp4">

And, you’re right. At the highest level, this is all you need to add a video to the web. But there are a lot of attributes that you can add to the video tag to improve the layout and delivery of the video.

Thetag#

Perhaps the best way to improve the delivery of video on the web is to optimize the files that are delivered to the browser. The way to do this is using thetag:

>
sourceSRC="myWebmVideo.webm"type="video / webm''>
sourcesrc=""MYH 264 Video.mp4"type='video / mp4; codecs="hvc1"'>
sourceSRC=" (MYH)  Video.mp4"type=''video / mp4; codecs="avc1"'>
video>

This references three separate source files. The browser starts at the top, and picks the first format and codec that it can use. In the video world, the file format, usually called the container, can be saved with different codecs, each with different attributes. (More on this here.) In the example above, the first choice is the WebM format (which can be encoded with VP8 or VP9 codecs), and is supported (at the time of writing) by 78% ofglobal users. The second choice is the the h. 265 codec of mp4, which is supported oniOS and newer Macs. These codecs are newer and have improved data compression, while delivering the same quality video as older video formats.

The final choice in our list is h. 264 mp4, which boasts support on 92% of allglobal users, but is an older format, and as such, is generally a lot larger than webm or h 265 videos. In one example, you can see the difference for a two minute movie:

Delivering files that are smaller is the best performance optimization you can make to better deliver your videos. When a smaller video is downloaded, video playback occurs sooner, and the video buffer fills up faster. This leads to fewer stalls during video playback. Additionally, server load is decreased, which makes up for the increased storage requirements of multiple video files.

The preload attribute#

Videos cannot begin playback until there is some video downloaded and stored locally. Using the preload attribute, you can control how much video is downloaded on page load. There are three values ​​for the preload attribute:auto,metadata, andnone.

preload=’ auto ‘#

If'auto'is used, the entire video will be downloaded , no matter if the user presses play or not. This enables fast video playback as the video is downloaded locally before the user presses play. From a data usage (and server load perspective) this should only be used when it is highly probable that the video is to be watched. Otherwise all the data of a full video download will be wasted.

preload=’metadata’#

This is the default setting for preload on Chrome and Safari. When'metadata'is used, the first 3% of the video is downloaded. Though this shares caveats with'auto', downloading just 3% of the video holds a much smaller server / data usage cost than the entire video, while still ensuring a portion of the video is stored locally for fast video startup.

preload=’none’#

This saves the most data, but will lead to slower video startup when play is pressed, because as the setting states, zero kilobytes of the video is preloaded locally on the device. For videos that are present, but unlikely to be played, this is the appropriate setting. This might also be used if the user has enabledLite modein their browser.

poster#

You may want to have a poster image that displays over the video window before the video starts playing:

SRC="myVideo.mp4"poster="/ image / myVideoImage.jpg"">

By adding a photo instead of a black box on the page, you make your website more engaging and interactive. However, using theposterattribute adds an image download before the video download begins. For that reason, you might consider avoiding adding a poster for videos that autoplay (as the additional download will delay the video download).

Playback controls#

Adding acontrolsattribute adds playback controls. Without these, your customers cannot start or stop your video. You should add this for videos so that users can stop and pause, change the volume, and so on. For background or looping videos, you may wish to omit this attribute.

muted#

Themutedattribute causes playback to begin in a muted state. If no controls are supplied, it will remain muted for the entirety of playback. If that is intended it might make sense to remove the audio track from the video. This further reduces the size of the video file being delivered to the customer.

As with containers and codecs, removing the audio file, also called demuxing, is also beyond the scope of this article. You can find instructions in theMedia Manipulation Cheat Sheet.

loop#

To deliver a video that loops the content (like an animated GIF), add theloopattribute. As video files are typically much smaller than animated GIFs, this mechanism allows you toreplace your GIFs with video files.

Autoplaying video #

If you want your video to play immediately (for example as a background video, or a video that loops like an animated GIF) you can add theautoplayattribute:

SRC="myVideo.mp4"autoplay>

That said, in order for a video to autoplay on mobile browsers, themutedattribute must also be added:

SRC="myVideo.mp4"autoplaymuted>

(Conclusion) #

Simply adding a video to your website will add a new realm of engagement for your customers, but it is important that you deliver the content properly — ensuring that the playback of the video is seamless and without stalls. Using the built in attributes of the

Read More