Create HTML File Copy the below content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- jQuery Latest -->
<script type='text/javascript' src='include/js/jquery-1.6.2.min.js'></script>
<!-- Audio/Video Player jQuery -->
<script src="johndyer-mediaelement-2d3aefc/build/mediaelement-and-player.min.js"></script>
<!-- Player Icons -->
<link rel="stylesheet" href="johndyer-mediaelement-2d3aefc/src/css/mediaelementplayer.css" />
</head>
<body>
<div align="center">
<video class="progression-single progression-skin" controls="controls" preload="none">
<source src="johndyer-mediaelement-2d3aefc/media/big_buck_bunny.mp4" type="video/mp4" title="mp4" />
</video>
</div>
<script>
$('.progression-single').mediaelementplayer({
audioWidth: 400, // width of audio player
audioHeight:40, // height of audio player
startVolume: 0.5, // initial volume when the player starts
features: ['playpause','current','progress','duration','tracks','volume','fullscreen']
});
</script>
</body>
</html>
Reference Links:-
http://progressionstudios.com/player/demo/index.html
http://progressionstudios.com/player/demo/options.html
http://www.mediaelementjs.com/#note2
http://webdesign.about.com/od/video/ss/html5-video_9.html
Notes:
Download MediaElement Plugins from the above links and place those files in you project. Include latest JQuery.x.js, mediaelement-and-player.min.js, mediaelementplayer.css in you HTML file.
Njoy Coding...;-)
