Website Performance HTML

How to implement looping/autoplaying videos using video tags and recommended values for file size and encoding

📝  Web Production production-note

Author : Kota Shimizu

Table of Content

Using a looping video in the main visual of your website with video tags is an effective approach to deliver the image of your site and brand.

On the other hand, videos tend to be large in file size.

In this article, I will examine how to implement videos with video tag, the recommended file size of the videos, and how to encode them, based on actual examples.

Conclusion

First of all, the conclusion of this article is as follows.

  • File format is mp.4, codec is H.264.
  • File size: 3MB or less.
  • Do not include audio data.
  • Frame rate : 23.98fps.
  • Resolution: 1920px * 1080px to 1280px * 720px.
  • Bit Rate : Under 5000kbps
  • Length : ```10 to 30 seconds``.
  • If you have time, also export as webm.
  • Also Consider YouTube.

There are many requirements, but I think the important things are the first three.

And as for exporting files, as long as the first two are met, anything is fine if your video can keep a clean image.

That said, As long as the file size is within 3MB and the video images are clean, you are good to go.

In order to achieve this, the fourth and subsequent criteria above will be useful.

How to implement (Video tag)

Code Samples and Explanations 01 - Preparing multiple videos to be played automatically and in a loop

In the case of a video that continues to play in a loop, such as the video used for the main visual called the hero section, it would be good to implement it with HTML tags like the following.

<video poster="poster.jpg" loop muted autoplay playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Message for when the video cannot be played.</p>
</video>

First, wrap the source element with the video element, and specify the video file with the src attribute of the source tag. Then describe the media type (MIME type) in the type attribute.

For MP4 format, it is type="video/mp4" and for WebM, it is type="video/webm".

If you want to check the list of MIME types, you can see to the following article from Mozilla.

Image file type and format guide - Web media technologies | MDN

Now, as for the order of the source tags, the browser will interpret them in order from the top, and if the browser can play a file, the browser will download and play it.

Therefore, in the above code sample, if the browser can play WebM (I'll write about WebM at the latter part of this article), it will play video.webm, and if not, it will play video.mp4.

This allows you to prepare several different files and play the best video for your browser.

To loop or autoplay a video, add attributes to the video tag.

In the code sample above, the following attributes have been added.

  • loop : play the video in a loop
  • autoplay : autoplay the video
  • muted : turn off the audio of the video (this attribute is required for autoplay on smartphones)
  • playsinline : Enables inline playback (Specifies that the video can be played within the video embedding area of the page.. Also required for Safari on iOS.)

Videos are large files, so it may take some time for them to load. For this reason, you can also specify a thumbnail image to be displayed before the video file loads.

This can be specified with the poster attribute of the video tag.

This image will also be displayed if the video file is corrupted and cannot be played.

That's all for the basic implementation.

Code sample and explanation 02 - Preparing only one video file

There are cases where you need to prepare only one video file. I think this case is still more common.

In this case, you only need to write one source element, as shown below.

<video poster="poster.jpg" loop muted autoplay playsinline>
  <source src="video.mp4" type="video/mp4">
  <p>Message for when the video cannot be played.</p>
</video>

At the time of writing this article, file size of WebM does not seem to be overwhelmingly smaller than that of mp.4, so I think there is no problem if you prepare only one mp.4 file.

For still images by the way, WebP(also wrote "ウェッピー" in Japanese Katakana character) is a better file format, so if possible, also prepare images in this format.

By the way, the images on this site are also delivered in WebP if your browser supports it.

Code Samples and Explanations 03 - Displaying buttons for play, stop, etc. on videos

If your video is not a background video, and the user can play at any time, you can display controller such as a play button by adding the controls attribute to the video tag as shown below.

<video poster="poster.jpg" controls loop muted autoplay playsinline>
  <source src="video.mp4" type="video/mp4">
  <p>Message for when the video cannot be played.</p>
</video>

Examples from other sites

I picked up two sites I've seen recently that use video for their main visuals and took a look at the code.

InVision' case

This is a design tool service brand Invision's website.

InVision | Digital product design, workflow & collaboration

The markup for the video portion of the hero section looked like this:

<video poster="https://marketing.invisionapp-cdn.com/www.invisionapp.com/marketing-pages/deployed/build/a0e5a9522d58f1aa66349b80db1419bf78002508/img/home/poster-masthead.jpg" src="https://marketing.invisionapp-cdn.com/www-assets.invisionapp.com/Homepage/enterprise-loop.mp4" playsinline="" muted="" loop="" preload="none"></video>

For Patagonia

This is the website for Patagonia, the outdoor fashion company.

Patagonia Outdoor Clothing & Gear

パタゴニア アウトドアウェア(Japanese site)

The markup for the hero section of the English version of the site was as follows.
(The Japanese site also used to have video until a while ago, but it seems to have disappeared.)

<video width="100%" height="100%" class=" lazyloaded" loop="" muted="" autoplay="" playsinline="" data-poster="https://www.patagonia.com/dw/image/v2/bdjb_PRD/on/demandware.static/-/Library-Sites-PatagoniaShared/default/dw8a8016d6/images/homepage/bldm-homepage-hero-video-backup.jpg?q=80&amp;sw=800&amp;" poster="https://www.patagonia.com/dw/image/v2/bdjb_PRD/on/demandware.static/-/Library-Sites-PatagoniaShared/default/dw8a8016d6/images/homepage/bldm-homepage-hero-video-backup.jpg?q=80&amp;sw=800&amp;">
 <source data-src="https://www.patagonia.com/media/marketing/videos/bldm-homepage-ambient-video.mp4" type="video/mp4" src="https://www.patagonia.com/media/marketing/videos/bldm-homepage-ambient-video.mp4">
</video>

Approximate file size for video.

Most sites keep their videos under 3MB.

The ideal size is 2MB or less, and the acceptable size is 3MB or less.

Video length guidelines

If you're aiming for 3MB or less with a quality that's not too dirty, it's better to keep it within 15 seconds.

Examples from other sites

Let's look at some examples of videos from the two sites I mentioned earlier.

InVision' case

  • Resolution: 1280 * 720
  • Length : 27 seconds
  • Frame rate : 23.98fps
  • Bit Rate* : 422kbps
  • Codec : H264 - MPEG-4 AVC (part 10) (avc1)
  • File Format : MP4
  • File size : 1.36MB

Patagonia' case

  • Resolution: 1920 * 1080
  • Length: 6 seconds
  • Bit Rate* : 3470kbps
  • Codec : H264 - MPEG-4 AVC (part 10) (avc1)
  • File Format : MP4
  • File size : 2.49MB

*Bit rate is an average value.

Recommended values for encoding based on the above

  • Resolution: 1280 * 720
  • Frame rate : 23.98fps
  • Bit Rate : 3000kbps (VBR / 2Pass)
  • Codec : H264 - MPEG-4 AVC (part 10) (avc1)
  • File Format : MP4

The bit rate of the video should be Variable Bit Rate (VBR), and I think you will get good results if you export by 2Pass.

Depending on the length and content of your video, you may need to adjust the encoding settings.

Please use the above as one of your reference and try out various methods.

By the way, what is WebM?

WebM is a relatively new video file format being developed by Google, and it is said that the same video file may have a slightly smaller file size with WebM.

The following is a quote from Wikipedia.

WebM is an audiovisual media file format.[4] It is primarily intended to offer a royalty-free alternative to use in the HTML5 video and the HTML5 audio elements. It has a sister project WebP for images. The development of the format is sponsored by Google, and the corresponding software is distributed under a BSD license.
The WebM container is based on a profile of Matroska.[3][5][6] WebM initially supported VP8 video and Vorbis audio streams. In 2013, it was updated to accommodate VP9 video and Opus audio.[7]

Cite : WebM - Wikipedia

You can easily convert mp4 to WebM by using the following web services.

MP4 to WEBM | CloudConvert

At the time of this writing, WebM seems to be supported by almost all browsers, with the exception of IE and Opera.

WebM browser support status.

For now, for videos used on the web, I think it is sufficient to use H.264 for encoding, but if there is a merit in reducing the file size compared to H.264 format videos in the future, such as for WebP, I think we can consider implementing WebM in earnest.

It is a matter of consideration while looking at cost effectiveness.

Summary.

It was a long writing, but here's a summary.

First of all, if you want to play a video with autoplay and looping, the implementation with video tag is as follows.

<video poster="poster.jpg" loop muted autoplay playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Message for when the video cannot be played.</p>
</video>

If you have only one video file, use only one source element.

Also, if you want the video to display controllers for playing, stopping, etc., add the controls attribute to the video tag.

Also, the following are a guidelines for export format and file size.

  • File format is mp.4, codec is H.264.
  • File size: 3MB or less.
  • Do not include audio data.
  • Frame rate : 23.98fps.
  • Resolution: 1920px * 1080px to 1280px * 720px.
  • Bit Rate : Under 5000kbps
  • Length : ```10 to 30 seconds``.
  • If you have time, also export as webm.
  • Also Consider YouTube.

Regarding implementation with YouTube videos

You can also embed a YouTube video. This way, you do not need to use the video tag, by using the iframe tag.

Using parameters, you can specify the display and playback method of the embedded YouTube player in detail.

For more information about these parameters, please refer to the official Google help page.

YouTube Embedded Player and Player Parameters | YouTube IFrame Player API

LINE is a website that implements a background video using YouTube's embedded player.

The LINE site uses the parameters of YouTube embedding code to achieve looping and auto-play, so this may be helpful for those who considers using YouTube.

The following is an example code from the LINE website.

<iframe id="mvclip" class="mvclip" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/JPpiKm8dKR8? playlist=JPpiKm8dKR8&amp;autoplay=1&amp;loop=1&amp;controls=0&amp;showinfo=0&amp;modestbranding=1&amp;fs=0&amp;rel=0&amp;wmode= transparent&amp;enablejsapi=1&amp;origin=https%3A%2F%2Flinecorp.com&amp;widgetid=1"></iframe>

LINE Corporation | Home