We’ve left behind the days when having a video on your website required an Adobe Flash plugin. Thanks to HTML5 and its multimedia features, designers can avoid plugins or heavy GIF animations, using the HTML5 video player instead. However, the bad news is that HTML5 only supports a number of video formats, such as MP4, OGG and WebM. Read more to learn about your transcoding options for HTML5 video and the top free and paid solutions.
What Is Transcoding?
Transcoding refers simply to the conversion of a video file from one encoding format to another—translating the file format or creating multiple versions of the same video. This gives you the advantage of adapting the versions according to the user’s needs or preferences, for example to match the device the video is playing, or to improve internet speed.
Video files tend to require large memory and bandwidth. Therefore, compressing videos and converting the file format helps them to load faster, avoiding buffering. The same applies when streaming a video for multiple devices, because a smart TV and a smartphone require different sizes and use a different connection speeds.
Why Use HTML5 Videos?
HTML5 revolutionized the embedding of video features through its
It allows organizations to reduce the cost of developing web applications, integrating all HTML elements on the web page. This enhances the live streaming capabilities, which are so in demand nowadays. This has turned HTML5 into the top choice for video player development.
How to Transcode HTML5 Video—Considerations
However useful HTML5 video is, there is a setback, since there is no video format that works in all HTML5 browsers. Therefore, there are a few tips and best practices to transcode your HTML5 video.
- Encode into the best compatible format
- Flash VP6—in an .flv format (Chose the “Flix VP6” preset from the encoding.com presets)
- H.264 (Baseline)—in an .mp4 container. (Chose the “Flash 9 H.264” from the encoding.com presets)
- VP8/WEBM—in a .webm container. (Chose “WEBM” from the encoding.com presets)
- Theora/Vorbis—in an .ogv container. (Chose “Theora” from the encoding.com presets)
- **Combine technologies -** While HTML5 is seen as a replacement for Flash, sometimes it is necessary to use a mix of technologies. For a website that already has applications built in Flash, it might make sense to adopt HTML5 standards in addition to leverage those applications, thus complementing these technologies. On the other hand, a starting website might as well use HTML5 exclusively.
- Leverage HTML5 video for mobile devices - iOS devices usually do not support Flash, so it is particularly important for iOS users. You can use HTML5 to develop video applications instead of the iOS SDK, bookmarking it in the device and providing video playback like an App Store application. This allows you to share with social networks and provides viewing ratings.
-
Ensure cross-browser compatibility - You should ensure the browser supports HTML5. Each of the major browsers in their latest versions support it, although not necessarily their earlier versions.
Only about 40%-50% of installed browsers are compatible with HTML5. Therefore, if you want to reach all screens it is good to have a plan B—to use Flash player for example. However there are some things to keep in mind :</p>- Minefield—only supports HTML5, as do all 64-bit browsers.
- Firefox—supports Ogg and WebM.
- Safari—supports Ogg and MP4.
These three formats, MP4, Ogg and WebM, cover all browsers between them, so if your browsers are not the latest versions, you should encode the videos in all three formats with cascading fallback options.</li> </ol>
Top Tools for Converting
There are a number of software solutions for video transcoding and conversion, both free and commercial. Here we feature the top 3 paid and free solutions:
Paid
Cloudinary Video Transcoding
Converts videos to all major formats, in real-time, including tailoring them for web and mobile viewing. It’s easy to use, just requires to specify the output format as the file extension of the delivery URL. It also offers features such as automatic resizing and cropping, apply effects and filters, and creating video thumbnails. Supports batch conversion. Input formats: MP4, WebM, FLV, MOV, OGV, 3GP, 3G2, WMV, MPEG, FLV, MKV, and AVI.
Pavtube Video Converter Ultimate
Converts video formats such as MKV, WMV, HEVC, TS, AVCHD, MXF, VRO, Tivo, even Blu-ray and DVD to HTML5 video formats (OGG, WebM and MP4). You can configure components such as video and audio encoder, bitrate, and sample rate on a drag-and-drop basis.
AVCWare Video Converter Ultimate
Converts popular video formats such as AVI, MPEG, WMV, DivX, MP4, RM, MOV, XviD, 3GP and audio formats like MP3, WMA, WAV, RA, M4A, AAC and AC3 between each other.
Converts video files into MP4 and OGG for HTML5 but can’t convert video to WebM for HTML5.
Free
Miro Video Converter
An open-source video conversion tool that converts any video format to HTML5 video formats (OGG, WebM and MP4). It can also convert videos to fit smartphones, iPhones and iPads. It works on a drag-and-drop basis. Miro Video Converter also supports batch conversion and resizing.
Free HTML5 Video Player And Converter
Helps create HTML5 videos to play on your website. It supports all common file formats and converts to MP4 and OGV formats. You can choose from presets or create your own.
Easy HTML5 Video
Creates videos in HTML5 that work across devices and major browsers. It converts most common video types into WebM, OGG and MP4. However, you can only choose to set the video resolution and quality, thus being limited in customization options.
Wrapping Up…
Transcoding is essential when you want your videos to reach more end users across diverse devices. In this article, we’ve covered several considerations to have in mind when transcoding HTML5 videos. Nowadays HTML5 videos are the norm. Therefore, choosing the right transcoding solution for your HTML5 video is a critical step to ensuring a good user experience.