jQuery Plugin For Embedded Youtube or HTML5 Videos - PragmaticPlayerJs

PragmaticPlayerJs is a customizable jQuery video plugin that make it easy to embed Youtube or HTML5 Videos into your website or blog. It can fall back to Youtube player for those older browsers which don't support html5 video element.

You may also like:

• jQuery Plugin for Fade-in and Fade-out HTML5 Audio - fadeaudio
• jQuery Plugin for Controlling and Customizing HTML5 Video/Audio - html5video
• Cross Platform HTML5 Audio & Video Player For jQuery - jPlayer
• HTML5 & Flash Video Player - FlareVideo
• HTML5 Webcam Plugin with jQuery - photobooth
• HTML5 Audio Compatibility Layer - Audio5js
• HTML5 Video and Audio Player Plugin - MEjs
• HTML5 Video Player with jQuery and CSS3

Basic Usage:

1. Include jQuery library and jQuery PragmaticPlayerJs on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../pplayer/js/jquery.pplayer.js"></script> 

2. Include pplayer.css to style your plugin

<link rel="stylesheet" type="text/css" href="../pplayer/assets/pplayer.css" />

3. The Html

<!-- Youtube Video -->
<div id="youtube-video"></div>

<!-- Html5 Video -->
<div id="html5-video">
    <video poster="./assets/poster.jpg" preload="true">
        <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
        <source type="video/mp4" src="./assets/test.mp4" />
        <!-- Ogg/Vorbis for older Firefox and Opera versions -->
        <source type="video/ogg" src="./assets/test.ogv" />
    </video>
</div>

4. Call the plugin with options

<script type="text/javascript">
$( document ).on("ready", function(){

$("#youtube-video").pPlayer({
youtubeVideoId: "YE7VzlLtp-4",
autoplay: 0,
features: [ "playpause", "progress", "quality", "timer", "mute", "fullscreen" ]
});

$("#html5-video").pPlayer({
youtubeVideoId: "YE7VzlLtp-4",
autoplay: 0
});
});

</script>

Change Log:

v0.2.4 (2013-04-08)

• Provided access to player object from $.fn.pPlayer

---

This awesome jQuery plugin is developed by dsheiko. For more Advanced Usages, please check the demo page or visit the official website.