During the last 6 years, over 75,352 people asked for help with HTML5 on StackOverflow. If you are one of them, you’re in the right place here!
Thanks to HTML5, it’s enough to convert video files to three main web video formats – MP4 (H.264), OGV and WebM and write a simple code like this one to insert a video:
HTML5 video tag sample code
Instead of manual coding, you can use a feature-rich native HTML5 video player. But no matter which HTML5 video player you prefer, you have to encode video files correctly. Often videos are converted to MP4 with a wrong codec, so as a result they play with no sound.
If you’re in a hurry and need a quick solution right now, please have a look at the short questionnaire. Depending on your aim, we’ll guide you to the right solution:
1. Do you run a small site or blog with little server space?
2. Are you looking for a fully-featured enterprise solution?
3. Do you need an all-in-one HTML5 conversion and player tool?
4. Will you broadcast a live video?
5. Do you want to embed a playlist?
6. Do you need to customize player to your site style?
7. You aren’t proficient with coding and require a simple solution?
8. Do you want to embed HTML5 player for commercial use?
We compared a dozen of HTML5 video players measuring them by 12 key criteria: price, license type, inbuilt video encoding, skin customization, fallback to Flash for old browsers, playback in fullscreen, subtitles and playlist support, player-platform compatibility, audio playback, video streaming, embed support, keyboard navigation.
Here are 6 most popular solutions described in detail:
1. Freemake Video Converter
As we have already told you at the beginning of this post, you should upload your video in three different formats: OGG, MP4 and WebM. It’s important to have a video in all these formats because each web browser uses it’s own format for HTML5 video: IE 9, Safari – MP4; Firefox, Chrome, Opera – WebM or OGG. So, if you skip one of these formats, you’ll lose visitors that come from a particular browser and you site might get a bad reputation.
If you don’t want it to happen, that’s where you can’t deal without free Freemake Video Converter. With Freemake, you can literally convert any video, starting from YouTube clips and ending up with non-protected DVDs and Blu-ray to the necessary HTML5 formats in only three clicks.
The software has a special function “to HTML5” that lets convert a video in all three formats at the same time. Moreover, at the end your receive a web page with a detailed instruction and a piece of code that you need just to copy and paste on your site. Just don’t forget to upload your videos to your server.
What is great about this method of embedding a video, it’s absolutely free and doesn’t require any special tech knowledge. You just get a ready-to-insert code and in a second enjoy your video on your site.
Pros:
- free
- converts video to all HTML5 formats
Cons:
- non customizable
- requires Windows OS
- logo on screen
Freemake Video Converter is a must-have for all those who don’t want to get deep into coding and prefer a simple and fast way to convert and upload a video on a web page.
Please see this tutorial on how to convert MP4 to WebM in 5 easy steps.
2. Freemake Slider Plugin for WordPress
If you have a WordPress-based blog or site, one more Freemake tool which you can use to embed a video on it is Freemake Slider Plugin for WordPress. It’s a free plugin with a high number of cool options.
First of all, Freemake Slider is completely responsive what means that your users will be able to watch your embedded videos in any browser and on any device: iPhone, iPad, Android smartphone or tablet, Windows portable gadgets, and so on. The plugin supports YouTube videos and playlists, Vimeo videos and offline videos from your PC. To add a video into Freemake Slider, use one of the corresponding blue buttons: Add Video, Add YouTube, Add YouTube playlist, Add Vimeo.
Upload your offline videos from the PC or insert your YouTube/Vimeo video links into corresponding plugin fields. Select a template style for your video slider. There are 23 templates to choose from: Classic, Auto Scroll, Cards, Minimalistic, etc. Have a look at all of them and select the one that suits your website or blog best of all. You can add as many videos as you wish. They’ll be organized in a beautiful and compact way. There is no need to paste numerous videos one by one anymore.
What is great about Freemake Slider Plugin for WordPress is its high level of customization. You can select arrow image, spacing between video sliders; choose playback options (auto play, random, circular, and pause on mouse over), and change the number of visible items.
One more important thing to mention is Lightbox support which settings can also be changed to your liking. For example, you may customize slideshow options, choose overlay color and opacity, set thumbnails and text options, enable social media buttons and much more.
When you are done with your video slideshow, copy the ready shortcode and paste it into your post or website where you want your videos to be.
Pros:
- free;
- easy to use;
- supports offline, YouTube and Vimeo videos;
- supports pictures;
- keeps multiple videos in a compact way;
- provides many slider styles;
- highly customizable.
Cons:
- you need to have YouTube API if you want to embed a complete YouTube playlist.
3. YouTube
If you run out of space on your server, then why not using free YouTube hosting? Since January 2015, YouTube switched to HTML5 as a default video player. It means that you don’t have to worry about video encoding, your video will be playable in any browser with YouTube.
Everything you need is to upload a video on YouTube and then copy the code and insert in on your page.
Please note that in case you want to upload a DVD title to YouTube, you will need first to convert it to a compatible format with DVD ripper software.
Again, it’s free and easy, and you get a standard YouTube player with all the necessary controls. There are a couple of disadvantages, however. First of all, you need to create a YouTube account, in case you don’t have it. And the 2nd thing is that your video may be easily deleted if it violates YouTube policy. However, if you are a beginner in site creation, this option will be the simplest for you.
Pros:
- free
- hosts video on it’s own server
- no need to convert video
Cons:
- non customizable
- video might be deleted
4. Video.js Player
Developed by Steve Heffernan, Video.js is a free and extremely popular player and WordPress plugin that now belongs to Brightcove Inc. It’s compatible with all WordPress versions and allows you embed any HTML5 video on your site without any problems.
What is great about Video.js is its preload option. It means that the video will start loading in the background, so when a visitor clicks, the playback will start right away without any pauses. The player has also a customizable skin that you can choose or create at designer.videojs.com. You can also add and change controls, color and size to make the player suit your site design.
Besides, Video.js has a great number of additional options such as captions and subtitles support, and video chapters. It’ll be a perfect choice for those who choose video as main information source for their sites. With Video.js your clips will look extremely professional.
Pros:
- free
- no logo
- customizable
- subtitles and captions support
- preload option
Cons:
- may appear issues with playback on iOS and Android
5. Projekktor
Projekktor is another free HTML5 player that you can use to embed a video on your site. The design of this player is plain yet stylish, with all the necessary controls such as: Play/Pause, Backward, Forward, Volume, etc. What differs it from all the other HTML5 players is its ability to embed playlists. As for the rest, Projekktor has almost everything you might need. If you are great at coding, you can customize it to meet all your needs and site design.
Pros:
- free
- highly customizable
- no logo
- possibility to choose Flash player for fallback
Cons:
- sometimes turns to Flash where it’s not supposed to
- issues on portable gadgets running iOS or Android
- paid Subtitles plugin
SEE ALSO: How to Add Subtitles to a Video
6. Kaltura HTML5 Video
Kaltura is a fully functional HTML5 video player with nice design, additional controls and full support for all major browsers, including old Internet Explorer versions. The player is very light and you don’t have to install any special modules to run it. As well as Video.js, Kaltura provides a great support for subtitles and close captions. However, it may require some tech knowledge to use, so if you don’t enjoy coding, you’d better choose something less complicated.
Pros:
- free
- customizable
- subtitles and close captions support
- old IE versions support
Cons:
- requires additional tech knowledge for customization
7. JW Player
JW Player is a great solution for enterprises and big companies. The JW stands for Jeroen Wijering, the creator of the player. There is a free version of JW Player and paid one available for $149 or $249/year depending on a number of features. If you don’t want to pay, then get a free version with limited functionality, but for non-commercial use only. As for the player itself, it looks very stylish, plain, offers all the standard controls, and will for sure make your site look even more fascinating. Besides, you can choose between 8 ready skins or even create your own one.
JW Player is a must-have for sites with huge traffic that use to stream a lot of live videos. The player provides perfect support for adaptive streaming. It means your live presentation can be watched almost with any browser or device.
Pros:
- customizable
- subtitles support
- good support for portable gadgets
Cons:
- logo in free version
- paid for commercial use
- customization requires tech knowledge
Here are 6 most popular HTML5 video that you can use to embed a video on a site or blog. Please tell us in comments what solution you opt for and why.
Additional resources on HTML5:
- Video tutorial on HTML5 embed by Freemake
- Full HTML5 specification by The World Wide Web Consortium
- HTML5 developer guide by Mozilla
- HTML5 designer guide by Adobe
