4. Poster image
Some mobile devices, like iPad or iPhone, won’t autoplay a video when a website is opened in the browser. That’s why it’s necessary to provide a so-called poster image, which replaces the video when needed.
5. Multiple file formats
Modern browsers are able to render videos in various formats. Apart from the mp4, there is also the ‘WebM’ format, which is focused on addressing the unique needs of serving video on the web. There is also ‘OGG’ multimedia format which was recommended some time ago because of it’s open standard and easy distribution methods. It’s far less popular nowadays, but it’s still supported.
The HTML <video> tag can provide several file sources and allows the browser to choose the best it supports. It’s recommended to always provide video in mp4 and webm formats.
6. Video optimization
The MP4 file metadata is stored in so-called moov atom, you can think of it as a kind of table of contents for the video. The moov atom is normally stored at the end of the file, after all of the information describing the file has been generated. The video will not start playing until the moov atom is loaded. Therefore if a planned delivery method is progressive download or streaming, the moov atom should be placed to the beginning of the file.
To change the position of the moov atom you can use a free software called HandBrake. In the summary section of the application check the ‘Web Optimized’ checkbox, which does exactly that.