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:
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>
<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 theclass="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
