Home HTML5 Audio Player HTML5 Video Player MediaElement.js - HTML5 Audio and Video player Framework

Wednesday 22 February 2017

MediaElement.js - HTML5 Audio and Video player Framework

MediaElementjs-Audio-and-Video-player
Mediaelements.js is a blazingly fast HTML5 Audio Player and Video player Framework, that enables web pages to play video and audio files with in custom player skin.
Before HTML5, audio and video files could only be played in a browser with a plug-in (like flash). The HTML5 Audio and Video element specifies a standard way to embed audio and video files in a web page. HTML5 Audio and Video elements enables Web pages to excute audio and video files with in a default player skin. Mediaelements.js makes working with audio in JavaScript easy and reliable across all platforms.
MediaElement.js is complete HTML/CSS audio/video player built on top MediaElement.js and jQuery. Many great HTML5 players have a completely separate Flash UI in fallback mode, but MediaElementPlayer.js uses the same HTML/CSS for all players. It is a HTML5 Audio and Video unification framework and a high-level JavaScript API for processing and synthesizing audio in web applications.

MediaElement.js HTML5 Video and Audio Player Can easily added to blogger websites.
Before getting starting with installing Mediaelement.js in Your web application You must view it live.

Live Preview:

Demo

1.Include JavaScript and CSS for the HTML5 Video/Audio Player Library

Add the following CDN files into your web page <head> section. 

<link href="https://cdn.jsdelivr.net/mediaelement/latest/mediaelementplayer.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/mediaelement/latest/mediaelement-and-player.min.js"></script>
Or download the package from https://github.com/johndyer/mediaelement-plugins, and add to your website directory 

<script src="path/to/mediaelement-and-player.min.js"></script>

<link href="path/to/mediaelementplayer.css" rel="stylesheet">

2.Include Jquerry to load mediaelements.js as a default web media player

HTML5 audio and video elements are allowed to apply the customized framework by mediaelement.js by adding the following JQuery into your body section of your web page. 

<script>
            if (mejs.Features.isiOS) {
                $('select').find('option[value^="rtmp"]').prop('disabled', true)
                    .end()
                    .find('option[value$="webm"]').prop('disabled', true)
                    .end()
                    .find('option[value$=".mpd"]').prop('disabled', true)
                    .end()
                    .find('option[value$=".ogg"]').prop('disabled', true)
                    .end()
                    .find('option[value*=".flv"]').prop('disabled', true);
            }

            $('select').change(function () {
                var
                    _this = $(this),
                    media = _this.closest('div').prev('div').children('div:first').attr('id');

                mejs.players[media].setSrc(_this.val());
                mejs.players[media].setPoster('');
                mejs.players[media].load();
            });

            $(document).ready(function() {
                $('video, audio').mediaelementplayer({
                    pluginPath: 'dist/',
                    success: function () {
                        $('.player').css('visibility', 'visible');
                    }
                });
            });

     
</script>

3.Setup Player

Seting up the Player with Mediaelement.js Framework you will have to Add the class="mejs-player" to any <video>, <audio>, or <iframe> tags, Copy and paste the following code into your web page, replacing the source files with the path to your own media files. Use both OGG and MP3 to ensure cross-browser compatibility, since some browsers don’t support MP3.

HTML5 Video Player and Audio Player 

<video class="mejs-player">
    <source src="/path/to/video.mp4" />
</video>

<audio src="/path/to/audio.mp4" class="mejs-player"></audio>

Setting Up with Embeddable players (YouTube, etc.)

<iframe class="mejs-player" width="640" height="360" src="https://www.youtube.com/embed/frdj1zb9sMY?rel=0" frameborder="0" allowfullscreen></iframe>

4.Compatibility

MediaElement.js HTML5 Video Player and Audio Player has been tested with the following browsers and assistive technologies.
  • Firefox 3.x and higher
  • Internet Explorer 10 and higher without fallback
  • Internet Explorer 8 and 9, dependent on JW Player as fallback.
  • Google Chrome 7.0 and higher
  • Opera 10.63 and higher
  • Safari 5.0 on Mac OS X
  • Safari on IOS 3.2.2 and higher (audio only, video plays in default IOS player)
  • Chrome on Android 4.2 and higher
As the player is extremely efficient and provides what must users will need. It is a powerful HTML5 audio and video library that creates a unified feel for for all media files (MP4, WebM, MP3, FLV), streaming content (HLS, M(PEG)-DASH, RTMP), and embeddable players like YouTube, Vimeo, DailyMotion, Facebook, and SoundCloud. If you are facing errors during installing MediaElement.js HTML5 Video and Audio Player, please submit them to the Issues queue.Or Comment there our media team will love to help you installing and applying MediaElement.js Framework for your media files over web.
Share

Related HTML5 Elements