Optimizing your video for the Web

1. Technique used
2. Video optimization
3. Example
4. My streaming

Ametys offers several options for adding a video to a page:

• use of external streaming platforms: youtube, dailymotion, and many others via the HTML Expert function.
• import MP4 video directly into Ametys. 

Streaming platforms are best suited to viewing video online, via a browser. 

The web is constantly evolving, including video, and this information is valid at the time this article was written. 

Technique used

Ametys uses the video tag to indicate to the browser that there is a video to play(https://www.w3schools.com/tags/tag_video.asp). We add buttons on top to allow the user to send actions to the browser. Playback is performed by the browser. We therefore need to adapt the video format to the capabilities of the browsers used by users and to network capabilities.

When you broadcast a video from the video tag, it's up to you to optimize the video for the end user, unlike streaming platforms like youtube which receive the video and convert it into multiple formats, the format is then selected by the streaming server according to the user (fiber, adsl, desktop pc, 4G phone, 3G, ...) so that playback is adapted.

Video optimization

You'll find many resources on the Internet on the subject of "video format for the web", "optimizing a video for the web", ..., these are just a few examples of keywords you can use to increase your knowledge and optimize your chances of having a video read by the greatest number of people. 

There are many parameters to consider: 

• the container (3GP, AVI, MP4,...), use MP4
• video codec (DivX, MPEG-4, H.264, ...), use x264
• resolution (4k = 3840x2160, 1080p = 1920x1080, 720p = 1280 x 720, 480p = 854 x 480), we recommend using 480p or 720p
• ratio (16:9 or 4:3), you have the freedom of use
• frequency, number of frames per second (FPS; 24 frames per second, 25 i/s, 60i/s...), using a frequency less than or equal to 25i/s, 16i/s is a good compromise
• bitrate, the number of kilobits of data per second (1000kbs, 5000 kbs,...), use a bitrate lower than 5000kbs. For example, a 10-minute video, 1920x1080, with a bitrate of 12Mb/s will be 900Mb. If we reduce the bitrate to 1Mb/s (=1000kbs), it will be 75Mb. We advise you to use a bitrate less than or equal to 1000kbs.

In summary, for an "optimized" video (to be adapted to your needs): MP4, codec x264, resolution 480p=854 x 480pixels (or 720p), frequency 15 frames per second and a maximum bit rate of 1000kbs.

A video without a streaming tool must be downloadable by the user. A heavy video, e.g. 500M, is likely to be complicated for a user to download, whether on a fixed PC in the office, at home or on a telephone. Weight is the result of the combination of all parameters (codec, resolution, bitrate, frequency).

Example

This example shows that, depending on requirements but above all on the parameters chosen, we can make playback optimized and accessible to a larger number of users. At the same time, this optimizes storage space, backups, user bandwidth and, by the same token, thecarbon footprint.

It is possible to optimize video duration and eliminate the "slowest" parts.

Another example on a 55-second video

Here's video n°3:

My streaming

To take things a step further, it's possible to have your own streaming server, either through paid solutions (there are all prices) or through free solutions. A google search for "youtube alternatives" or "youtube alternative self hosted" is a good start.