If you have to put a video on a website, the answer is clear: Upload it to Youtube or Vimeo and embed it on the site. But what if the customer does not want to upload the video to any streaming server? Then you must convert it to a smaller format and play it with a player on the site.
Some years ago this task was also simple; convert the video to .flv and play it with a Flash player. But now it is not so easy, because the video has to be played on non-friendly Flash devices, such as mobile (especially Apple), and generally Flash is not as well regarded as before.
Therefore, the first thing is to find an HTML5 player that uses the "video" tag, and that has a "substitute" Flash player for cases of browsers that do not support HTML5.
After several tests, consisting simply on the player fulfilled what he promised (play as the file is loading, events, correctly play the different formats, not giving the standard error of not recognizing the "mime type", etc. ), I am left with VideoJS.
And now the video format; all HTML5 players recommend upload the video in three formats, to overcome the incompatibilities with various browsers:
- MP4+h264: The best size / quality, looks perfectly on mobile browsers, Safari, Firefox, but Chrome does not like it for using the h264 codec, the same in Internet Explorer under v10.
- WebM: Plays ok, although size / quality ratio is less than MP4. It is useful for modern browsers where MP4 fails to play.
- Ogg: Similar on size / quality to WebM, it is necessary for compatibility with older browsers such as Firefox 3.
To convert the original file in this three formats, there are many programs, including online ones. When creating the MP4 you must keep in mind one important thing: It has to be created so that the player starts to play it when it is loading, not when it is fully loaded, because the user would have to wait a lot for watching it, depending on how big it is. If you create the MP4 and have this issue, you must modify the MP4 following this instructions from StackOverflow. With the command-line:
MP4Box -add my_video.mp4 my_newVideo.mp4you fix the file. The file MP4Box can be found compiled for all operating systems.
Finally, a trick with VideoJS: Chrome seems to never finish loading the video until you put the preload = "auto" parameter.