menu
Ad goes here

Sunday, 31 July 2016

A perfect and easy to use Video/ Audio player

Easy to use html5 video player
The Video Player which we looks for perfect one and most of the time we found its either premium version or support particular formats. Have you heard about Media Elements? Yes the Media Elements player support all most all video and music formats including YouTube video.

The MediaElement player is a complete HTML and CSS audio/ video player which works with jQuery and MediaElements.js. The best part of this player is - its use same HTML and CSS for Flash UI fallback.

How to implement?
You can make your player within few minutes, just including jQuery and MediaElements.js and the video and audio tag converted to a beautiful player. Click on below button to download the sample player or see details in code below.

Download Form Validation Sample Download Form Validation Demo

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>HTML5 MediaElement</title> 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.22.0/mediaelementplayer.min.css" />
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.22.0/mediaelement-and-player.min.js"></script>  
</head>
<body>
<video width="640" height="360" id="player2" poster="http://mediaelementjs.com/media/echo-hereweare.jpg" controls="controls" preload="none">
 <!-- MP4 source must come first for iOS -->
 <source type="video/mp4" src="http://mediaelementjs.com/media/echo-hereweare.mp4" />
 <!-- WebM for Firefox 4 and Opera -->
 <source type="video/webm" src="http://mediaelementjs.com/media/echo-hereweare.webm" />
 <!-- OGG for Firefox 3 -->
 <source type="video/ogg" src="http://mediaelementjs.com/media/echo-hereweare.ogv" />
 <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
 <object width="640" height="360" type="application/x-shockwave-flash" data="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.22.0/flashmediaelement.swf">   
  <param name="movie" value="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.22.0/flashmediaelement.swf" /> 
  <param name="flashvars" value="controls=true&amp;file=http://mediaelementjs.com/media/echo-hereweare.mp4" />   
  <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
  <img src="http://mediaelementjs.com/media/echo-hereweare.jpg" width="640" height="360" alt="Here we are" 
   title="No video playback capabilities" />
 </object>  
</video>
<script>

$('audio,video').mediaelementplayer({
 //mode: 'shim',
 success: function(player, node) {
  $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
 }
});

</script>
</body>
</html>

Skinning: You can easily change the above player by simply modifying the stylesheet and even you can change graphic elements based on your project requirement.

For more information you can visit official website - http://mediaelementjs.com/

Credit: John Dyer
License: MIT

No comments:

Post a Comment

Books for you (Crafted with )