jQuery Plugin For Embedded Youtube or HTML5 Videos - PragmaticPlayerJs

jQuery Plugin For Embedded Youtube or HTML5 Videos - PragmaticPlayerJs
File Size: 22.6KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.