Pak Jiddat - Innovative Software Services

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Creating custom playlists for MediaElementPlayer

Created On: 13 Feb, 2018: 18:03:43 - Tags : web development

Introduction

MediaElementPlayer.js is a HTML/CSS Video/Audio player for the web. It is based on MediaElement.js media framework library. Both player and library are available as open source and free of cost under the MIT license.

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+.

Installation and configuration

To install MediaElementPlayer.js, we need to first clone the mediaelement git repository from: https://github.com/mediaelement/mediaelement. After that we need to copy the contents of the build folder to the document root.

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.

MediaElementPlayer.js plugins (VAST, VPAID and Postroll)

The MediaElement.js provides several plugins that can be downloaded from: https://github.com/mediaelement/mediaelement-plugins. Some useful plugins include postroll, which allows displaying custom html at the end of the video and the ads plugin, which along with the vast/vpaid plugin allows displaying video ads.

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

Creating custom playlist for the MediaElementPlayer.js

The playlist plugin provides a simple playlist. We were looking for a HTML5 video player library with support for YouTube playlists. MediaElementPlayer.js was the best option, but its playlist plugin did not support loading track information from xml file. Also the playlist layout was not so good. Fortunately the source code for the playlist demo was easy to customize.

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

Conclusion

MediaElementPlayer.js is a useful video and audio player for the web. It is being actively developed and is supported by an active open source community

Related Articles

  1. Installing Laravel Spark, GitScrum and IceCoder on Debian Stetch
  2. Upgrading JWPlayer to version 7
  3. Responsive website design with Twitter Bootstrap