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

2 comments:

  1. 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. 1z0-1035 dumps

    ReplyDelete
  2. The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Project Centers in Chennai.

    Software management seeks for decision support to identify technologies like JavaScript that meet best the goals and characteristics of a software project or improvement programme. JavaScript Training in Chennai Accessible experiences and repositories that effectively guide that technology selection are still lacking.

    Aim of technology domain analysis is to describe the class of context situations (e.g., kinds of JavaScript software projects) in which a software engineering technology JavaScript Training in Chennai can be applied successfully

    ReplyDelete