MediaElementPlayer.js allows playing audio and video from different sources such as YouTube, SoundCloud, DailyMotion, Facebook, MP4, FLV and more. The player is easy to setup and configure.
For browsers that do not support HTML5 or certain media codecs such as H.264, MediaElementPlayer.js provides a flash based UI. The flash based UI provides the required media codecs or the missing HTML5 features.
MediaElementPlayer.js supports IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ and Android 4.0+.
To create a sample page showing the player, we need to include following CSS file in the head section of the html page:
<link rel="stylesheet" type="text/css" href="mediaelementplayer.min.css">We also need to include the following file just above the closing body tag:
<script src="mediaelement-and-player.min.js"></script>Next, we need to instantiate the video player using the following code:
<div class="player"> <video id="player1" width="640" height="360" preload="none" style="max-width: 100%" controls poster="images/big_buck_bunny.jpg" playsinline webkit-playsinline> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> <track src="dist/mediaelement.vtt" srclang="en" label="English" kind="subtitles" type="text/vtt"> </video> </div>
The above code will create a video player and load it with the a sample mp4 file with subtitles.
VAST (Video Ad Serving Template) is a specification released by the Interactive Advertising Bureu (IAB), which describes the communication standard between video players and ad servers. For example, in order to play a video ad, the video player sends a request to an ad server, which returns the XML conforming to the VAST standard. The xml structure describes the details for displaying the video ads.
VPAID (Video player ad-serving interface definition) is a specification by the IAB which describes interactive communication between ad server and video player. It allows video players to display interactive video ads
The Google Analytics plugin allows recording video events such as play, pause and end. These events are recorded by Google Analytics and can be viewed from the Google Analytics console.
The MediaElementPlayer.js API describes the different player configuration options. It also describes the different functions for customizing and controlling the player.
I came across a couple of issues while using the MediaElementPlayer.js. The first issue was that the player did not allow setting the YouTube configuration dynamically. Second issue was a full screen error when using the playlist plugin. The error was that in the playlist demo sample, when the player is in full screen mode and the big play button is clicked, the player resizes without properly exiting the full screen mode. I reported both issues to Git Hub