Abhishek Narain shares his exciting experiences of building web-based video players. Read on to discover how easy it is to build one yourself. Abhishek tweets at @narainabhishek
Problem Statement
We all have wondered if we could ever have a set of common standards that would make life of a developer easy! Today we spend enough time making our code work on different platforms, different browsers, and different Operating systems. So if we had to earlier play a video, the solution was to user 3rd party players/ plug-ins which tried to outplay each other in terms of browsers support and features.
Solution – HTML5 video support
Thanks to W3C who have worked towards HTML5 specs which today is being followed by all major browsers. The video tag (<video>) has been in HTML5 for several years now and all the modern browsers support it. The W3C schools page illustrates its usage in clear terms
Here’s how easy it is to add it to your page:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Fallback content: Your browser does not support the video tag.
</video>
Yes, even YouTube uses HTML5 video player. Which suggests that it isn’t only easy to use but it is secure too. There is EME (Encrypted Media Extensions) in W3C draft which ensure DRM usage for HTML5 video player without the use of Plug-ins. Not all browser supports this today though. But certainly will in the coming days.
Player Options
Azure Media Player –If you are hosting your media content on Azure Media Services, probably the best option to stream it is using the Azure Media Player. Azure Media Player utilizes industry standards, such as HTML5, Media Source Extensions (MSE) and Encrypted Media Extensions (EME) to provide an enriched adaptive streaming experience.
Video.js framework – You can also look at the open source video.js framework. It is similar to the Microsoft player, but also offers a bevy of options to make it easy to style. They have an excellent skin designer, too.
What’s Next?
We can also “wrap” that HTML5 site and player and create hybrid applications for mobile devices and Windows with a tool such as Cordova. Windows 10 gives a beautiful way of creating Web Hosted Applications and we can truly host the Responsive Web Design based Web App with HTML5 standards based Player into a Windows 10 App and run it over 1 billion devices (by 2020, hopefully!).
Call to action
If you would like to ensure your website is standards-based so that it runs well across browsers, please scan your website now or write to us at modernweb@microsoft.com
Follow Us
