MyMediaElements - HTML5 Audio and Video Players libraries

MyMediaElements offers stunning html5 video players, html5 audio players, web music players api, custom html5 players framework and all media Players libraries

Wednesday, 8 March 2017

A Stunning Flat Responsive HTML5 player For Audio Streaming

responsive-html5-player-for-audio-streaming

A stunning Flat Responsive HTML5 Player for Audio Streaming with customized controls and skin. The jQuery Audio Player Plugin is basically customizes default HTML5 Audio Element using JavaScript and some CSS, that gives complete awesome look to your Audio player you always need.
Many Advance web developers are working with default HTML5 player and customizing it with different styles and skins. HTML5 Audio Element is one of the most popular feature of HTML5. It is now already supported in almost every modern browsers, even so for IE9. Hover each broswer provides default native HTML5 player skin.

How it works

The JQuery Plugin Works with default <audio> Element and replaces targeted element with litle HTML using JavaScript events attached to it. It is tiny lightweight HTML5 player  for Audio Streaming in web page to play a single audio file. The Player works with jQuery Library, The Jquery Plugin would be pretty much useless without the respective CSS which is responsible for the looks of HTMl5 audio Player and some of the features summarized below.

Features

  • Responsive and Mobile ready
    The HTML5 Player for Audio streaming is completely responsive and feel good with every size of device, Either it is smart phone, Tablet or thirty inches of large display. It doesn't requires media queries or any CSS coding for making it responsive, It automatically adopts the fluid layout.
  • Touchable and User Friendly
    The player is really touchy and alive. This stunning HTML5 Audio Player for audio streaming can be used easily with touch-capable screens. All the controls are touchy you can control every thing with cursor and can also do with your finger. Every action is touch enabled and defined.
  • Adaptivity and support
    If JavaScript is disabled? No worries, the default browser’s player will do the job.The Volume button appears when you touch volume control icon. (bad for iOS). Some unknowns browsers does not support the
  • Image-less and Lightweight
    The looks and styles of HTML5 Audio Player are purely CSS designed no even single Image is used.The minified JQuery Audio Player Plugin is so light weight, it's size comprises total 4kb of space.
  • Usable.
    The essential Play / Pause and playback progress controls, Volume On / Off / Up / Down controls and indication of how much of the audio is preloaded (buffered).
  • Flash-less.
    No Flash are required here.

Installation

Get start with adding HTML5 player for Audio streaming into your web page. Adding html player into your website comprises some following steps. 

1# Add JavaScript and CSS

Add the following JavaScript Library files into to your body section to dynamically customize the default HTML5 Audio element into touchy and responsive audio streaming player.
There are two different ways of setting up HTML5 Audio player plugin in your website. You may use the following CDN files.
<script src="https://mymediaelements.github.io/stunninghtml5player/js/player.js"></script>

<link href="https://cdn.jsdelivr.net/mediaelement/stunninghtml5player/js/player.css" rel="stylesheet"/>
or download the package and upload the files into your website directory.
<script src="path/to/player.js"></script>

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

2# Include JQuery

To Call the plugin you must add the the following JQuery into the body section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( function()
    {
        $( 'audio' ).audioPlayer();
    });
</script> 

3# Setup the Player

Specify multiple audio formats, So that every user can easily listen to your audio, Because none of all browsers supports all kind of audio formats.  Add the following default HTML5 Audio Element tag into your desired location of the body section. This HTML5 Player supports multiple audio files on the same webpage, you may add multiple audios to single webpage using the same default HTML5 Media element audio tag.
<audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
</audio>
No more coding are required, You are now completely done. Enjoy the responsive audio player.

Feedback

The HTML5 player is tested and it is found good on the latest browsers like latest Safari, Chrome, Firefox, Opera both Mac and Windows versions for audio streaming. It also works perfect on Internet Explorer 9,10 and degrades  to single play/pause button on earlier versions. It is mainly works with touch screen devices many of them run iOS6, Windows Phone 7 and Andriod 4.2 default browsers, However, the earlier Andriod operating system does not support Audio elements, so the player may not work well. 

Read more

Friday, 24 February 2017

A Complete HTML5 Audio Player for your website

complete-html5-audio-player-for-your-website
A simple and complete HTML5 Audio Player purely designed with CSS and HTML for your media web pages. It gives awesome look to your audio play lists, In fact it is so simple, so that it could be added any where in your web page. It is almost a play button with JQuery that customizes the default HTML5 audio element  controls and skin to a simplest ever HTML5 Audio Player over the web. Many web developers are working with adding HTML5 media elements in web pages and they have been given us several examples of HTML5 Media Elements  frameworks that works with default HTML5 Media Elements using CSS and JavaScript and makes it more awesome and user-friendly.

Personally being a web-developer, I think all those things looks awesome on your web pages that gives better rank to your web pages over internet. Using complex and heavy media libraries is sometimes gives us delay in pages while they are crawled and results bad impression to your SEO Ranking.  This HTML5 Player is so light there is no external libraries and scripts are required to execute the player. It's is SEO friendly and smallest size of HTML5 player ever.


Adding HTML5 Audio Player in your website include some easy steps even it's so easy so that a school boy could go through it ( :-P ).

Preview


1.The HTML

Add the following HTML to your body section to place the HTML5 Audio player any where in your website.

<div class="mymediaelements">
    <p>
        <audio id="yourAudio">
            <source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
        </audio>
        <a id="audioControl" href="#">
            <img src="https://mymediaelements.github.io/html5audioplayer/images/play-flat.png" id="play"/>
            <img src="https://mymediaelements.github.io/html5audioplayer/images/pause-flat.png" id="pause"/>
        </a>
    </p>
  Designed by <a href="mediaelements.com">mediaelements.com</a>
</div>
Change the Audio File source path in a default Audio Media elements.


        <audio id="yourAudio">
            <source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
Your browser doesn't support Audio formats. Please upgrade your browser. 
        </audio>
        

2.The CSS

Include the following CSS to your <head> section. You may change it later on to setup the HTML5 Audio Player Size etc.

<style>
#audioControl img {
    width: 50px;
    height: 50px;
    
}

#pause {
    display: none;
}

</style>
If you are really sharing beautiful videos over your website and you want stunning HTML5 Video Player you must read this:

MediaElement.js - HTML5 Audio and Video player Framework

3.The JavaScript For HTML5 Audio Player

Add the following JavaScript to your body section. It will work with default HTML5 Audio Element to setup the new skin and controls.

<script>
  var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl'),
    playButton = document.getElementById('play'),
    pauseButton = document.getElementById('pause');

function toggleButton() {
    if (playButton.style.display === 'none') {
        playButton.style.display = 'block';
        pauseButton.style.display = 'none';
    } else {
        playButton.style.display = 'none';
        pauseButton.style.display = 'block';
    }
}

ctrl.onclick = function () {

    if (yourAudio.paused) {
        yourAudio.play();
    } else {
        yourAudio.pause();
    }
    
    toggleButton();

    // Prevent Default Action
    return false;
};


</script>
Oh yes No more steps your are all done. If you are getting trouble adding all these codes for HTML5 Audio Player to your website or have some issue let us know we will try our best to resolve it for you. If you liked the post please appreciate us and give us a social click or share.
Read more

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:

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.
Read more