Defining HTML5 & HTML5 Video
Source: W3C.
Overview
In this post, we will be discussing the definition, usage and popularity of HTML5 across the Web. Then, we will be focusing further on HTML5 Video, what is it, its usage and why is it better to start using HTML5 player instead of using Adobe’s Flash. Finally, we will be viewing and explaining different types of HTML5 video players, what do they do and what special features they have.
Definition
HTML refers to HyperText Markup Language, which is a markup language that is used for structuring and presenting content of various types on the Web. HTML5 is the latest version of the HTML standard, published in 2014 by W3C with many new features added.
Usage & Popularity
HTML can be seen as the new successor for Web content management, especially after Steve Jobs announced in his “Thoughts on Flash” in 2014 that “Flash is no longer necessary to watch video or consume any kind of web content” and that “new open standards created in the mobile era, such as HTML5, will win”. This comes with the greatly enhanced functionality that HTML5 provides. Moreover, in July of 2017 Adobe announced to the world that Flash’s era will be done by the end of 2020, leaving the arena smoothly for other open formats, mainly HTML5. HTML5 standards have been implemented across all modern web browsers, and the need for Flash just isn’t there anymore.
HTML5 Video
One of the major new elements introduced by HTML5 specification: replacing the object element with The video element. Its creators have set up the path for it to take over the the video-content on the Web, replacing the need for Flash and its browser plugin. HTML5 does not specify for its users the video and audio formats that they should be using, which means that it is up for them to decide what formats to upload and support. However, the general guidelines advice that user agents should support Theora video, Vorbis Audio and Ogg container format; as they are generally widespread.
Using HTML5 instead of Flash is a process that has already started years ago, with the big companies, lead by the big search engines and social networks, such as Google, Facebook, Wikipedia and Youtube. Currently, about 72% of all the websites on the internet support HTML5, which shows the trend towards HTML, specially when compared to Flash’s 5%!
For more info on how do HTML5 and Flash compare, check out this article.
On the other hand, it is necessary to remind you that HTML5 on its own cannot be used for animation or interactivity, as it needs to supplemented with CSS3 or JavaScript.
HTML5 Video players
The following list of five video players will span the general needs of different users, ranging from fresh Youtube creators to successful web designers.
Elite Video Player
This simple, fully-customizable and highly accessible player can deal with self-hosted (only mp4), Vimeo, Youtube, Amazon S3 and Google Drive videos. It works across all browsers and also includes features such as: lightbox, responsive, and full-screen modes, Youtube channel and playlist support. But more importantly, it brings the ability to add pre-roll, mid-roll and post-roll video and popup ads.
VideoJS
A free and open source player that can fall back to Flash and other alternate online video player playback technology, such as Microsoft’s Silverlight. Its features include basic playback functions, such as autoplay and reload. But also includes skinning, where it is originally built from HTML and CSS but the user can change to a different skin, and Plugins; which can be used to enhance the performance and abilities of the player, some of the best plugins are Analytics, Playlist and Brand.
Cloudinary
This player is bundled with numerous features and functionalities. It provides an API for fast upload and a secure path for content privacy. It offers broad device support for both mobile and desktop web browsers. Moreover, it provides video manipulations that can be applied on both the player and the per-video levels. It supports mp4, mov, webm and ogv formats, and it can be specified to change the format of the video to the best format for the user’s browser. It is analytics-ready and is also highly customizable. For more info, check out Cloudinary’s site.
JWPlayer
Being on the top 5 players, together with VideoJS, for a long time, It boasts a large number of features from analytics to full HTML5 video controls. This player is fully themeable and it has an integrated API and supports 4k resolution, 360 degrees with Gyroscope motion support. It, also, offers a sizable number of features through its add-ons as well, such as advertising tie-ins, closed captioning and social networking tools.
Plyr
This simplistic player is quite popular among different users due to its lightweight design which smoothens the processing of large videos. It provides full support to screen readers and VTT. Moreover, it allows users to change the appearance and gives them high customizing abilities, and It, also, encloses a wide range of processing and editing elements.
For more players and details on them, check out this blog post.
Closing Thoughts
Adding a video to your webpage is not as hard as it used to be with Flash and Silverlight, as we have seen that HTML5 provides a new easier way that does not require a plugin built into the browser.
We have seen that there are many options for the player to be used for HTML5 video, but the one to use is your choice. Different clients have different needs and desires that they wish to be met, and it is up to them to decide which player fits their work frame the most. But I hope that my brief explanation can guide you through some of the widely used platforms.
In conclusion, we have gone through the definition of HTML5 and its growing popularity, specially when compared to Flash, and its usage. Later on, we dived deeper into HTML5 video players and have previewed some of the popular players, with the different and interesting features each one has to offer, and concluding with some final thoughts.
References
HTML5: What is it?
https://www.techradar.com/news/internet/web/html5-what-is-it-1047393
HTML5 Video Player
https://cloudinary.com/visualweb/display/IMMC/HTML5+Video+Player
15 Best HTML5 Video Players
https://code.tutsplus.com/tutorials/15-best-html5-video-players–cms-28589
The Advantages Of Using An HTML5 Video Player
http://blog.viewbix.com/the-advantages-of-using-an-html5-video-player/
Is Your HTML5 Video Player Fully Compatible?
https://www.dacast.com/blog/html5-video-player/