jQuery TubePlayer Plugin

TubePlayer  is a jQuery wrapper around the YouTube Player API.

The TubePlayer plugin allows developers to focus on functionality as opposed to infrastructure around the YouTube player. The plugin exposes meaningful methods that are triggered based on state changes from the player API. The plugin also provides events that can be triggered on it allowing developers to create a customized player remote, programmatically control videos, gain access for analytics purposes and much more.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: tikku.com

1. INCLUDE JS FILES

<script src="jquery.js"></script>
<script src="jQuery.tubeplayer.min.js"></script>

2. HTML

<div id='player'></div>

3. JAVASCRIPT

jQuery("#player").tubeplayer({
    width: 600, // the width of the player
    height: 450, // the height of the player
    allowFullScreen: "true", // true by default, allow user to go full screen
    initialVideo: "[some video id]", // the video that is loaded into the player
    preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
    onPlay: function(id){}, // after the play method is called
    onPause: function(){}, // after the pause method is called
    onStop: function(){}, // after the player is stopped
    onSeek: function(time){}, // after the video has been seeked to a defined point
    onMute: function(){}, // after the player is muted
    onUnMute: function(){} // after the player is unmuted
});

4. OPTIONS

var defaults = {
    // Plugin init params
    width: 425,                     // the width of the player
    height: 355,                    // the height of the player
    allowFullScreen: "true",        // true by default, allow user to go full screen
    initialVideo: "DkoeNLuMbcI",    // the video that is loaded into the player
    start: 0, 
    preferredQuality: "auto",   // preferred quality: auto, small, medium, large, hd720
    showControls: true,                 // whether the player should have the controls visible, 0 or 1
    showRelated: false,                 // show the related videos when the player ends, 0 or 1 
    playsinline: false,             // setting for ipad
    autoPlay: false,                // whether the player should autoplay the video, 0 or 1
    autoHide: true, 
    theme: "dark",                  // possible options: "dark" or "light"
    color: "red",                   // possible options: "red" or "white"
    showinfo: false,                // if you want the player to include details about the video
    modestbranding: true,           // specify to include/exclude the YouTube watermark
    annotations: true,              // show annotations?
    loop: 0,                        // whether or not the player will loop
    protocol: 'http', 

    // the location to the swfobject import for the flash player, default to Google's CDN
    wmode: "transparent",           // note: transparent maintains z-index, but disables GPU acceleration
    swfobjectURL: "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
    loadSWFObject: true,            // if you include swfobject, set to false

    // HTML5 specific attrs
    iframed: true,                  // iframed can be: true, false; iframed: HTML5 compliant player

    // Player Trigger Specific Functionality
    onPlay: function(id){},         // after the play method is called
    onPause: function(){},          // after the pause method is called
    onStop: function(){},           // after the player is stopped
    onSeek: function(time){},       // after the video has been seeked to a defined point
    onMute: function(){},           // after the player is muted
    onUnMute: function(){},         // after the player is unmuted

    // Player State Change Specific Functionality
    onPlayerUnstarted: function(){}, // when the player returns a state of unstarted
    onPlayerEnded: function(){},    // when the player returns a state of ended
    onPlayerPlaying: function(){}, //when the player returns a state of playing
    onPlayerPaused: function(){},   // when the player returns a state of paused
    onPlayerBuffering: function(){}, // when the player returns a state of buffering
    onPlayerCued: function(){},     // when the player returns a state of cued
    onQualityChange: function(quality){}, // a function callback for when the quality of a video is determined

    // Error State Specific Functionality
    onErrorNotFound: function(){}, // if a video cant be found
    onErrorNotEmbeddable: function(){}, // if a video isnt embeddable
    onErrorInvalidParameter: function(){} // if we've got an invalid param

});

5. API EVENTS

onPlay,
onPause,
onStop,
onSeek,
onMute,
onUnMute

onPlayerUnstarted,
onPlayerEnded,
onPlayerPlaying,
onPlayerPaused,
onPlayerBuffering,
onPlayerCued,
onQualityChange

onErrorNotFound,
onErrorNotEmbeddable,
onErrorInvalidParameter

6. METHODS

jQuery("#player").tubeplayer("cue", playerId);

jQuery("#player").tubeplayer("play");
jQuery("#player").tubeplayer("play", videoId);
jQuery("#player").tubeplayer("play", {id: videoId, time: 0});

jQuery("#player").tubeplayer("pause");

jQuery("#player").tubeplayer("stop");

jQuery("#player").tubeplayer("seek","0:32");
jQuery("#player").tubeplayer("seek",100); // or use seconds

jQuery("#player").tubeplayer("mute");
jQuery("#player").tubeplayer("unmute");
jQuery("#player").tubeplayer("isMuted");

jQuery("#player").tubeplayer("volume");
jQuery("#player").tubeplayer("volume",50);

jQuery("#player").tubeplayer("quality");
jQuery("#player").tubeplayer("quality", "hd720");

jQuery("#player").tubeplayer("playbackRate"); 
jQuery("#player").tubeplayer("playbackRate", 1.5); // video must support this

jQuery("#player").tubeplayer("data");
jQuery("#player").tubeplayer("opts");
jQuery("#player").tubeplayer("videoId");

jQuery("#player").tubeplayer("size",{width:400,height:300});

jQuery("#player").tubeplayer("destroy");

jQuery("#player").tubeplayer("player");