jQuery Plugin Custom Youtube Video Controler - Download jQuery Plugin For Custom Youtube Video Controler

Download jQuery Plugin For Custom Youtube Video Controler

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Custom Youtube Video Controler, hope it will help you in programming stack.

jQuery Plugin Custom Youtube Video Controler - Download jQuery Plugin For Custom Youtube Video Controler

File Size: 4.95 KB
Views Total: 1571
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

YouTube_Controller.js is a jQuery wrapper around the latest Youtube Data API which makes it easier to control the Youtube video player embedded in the document.

How to use it:

1. Include the youtube_controller.js JavaScript file on your HTML page after referencing jQuery library.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="youtube_controller.js"></script>

2. Create a container element to place the Youtube video player.

view source
1 <div id="playerContainer">
2 </div>

3. Call the function on the player container and insert your own API key & video ID.

view source
1 $("#playerContainer").YTController({
2   videoId: "6k8qeqZycgE",
3   apiKey: "AIzaSyCmq9OXz3ezp883KTeRFSyygzvzdnRKHJ4"
4 });

4. All possible options to config the Youtube video player.

view source
01 $("#playerContainer").YTController({
02  
03   // enable play list
04   displayPlaylist: false,
05  
06   // Youtube player parameters
07   playerVars: undefined,
08  
09   // height of the player
10   height: "390",
11  
12   // width of the player
13   width: "640"
14  
15   // triggered when a playlist item has been clicked
16   listItemClickHandler: function(){},
17  
18   // template for the playlist
19   listItemHTMLTemplate: "<div><img src='[playlistItem_thumb]'/><span>[playlistItem_timestamp]</span><h4>[playlistItem_title]</h4><p>[playlistItem_description]</p></div>",
20  
21   // A string delimited by periods '.' to represent which thumbnail to choose from.
22   // While making a call to the YouTube API a JSON feed is returned in which we traverse for the thumbnail image.
23   listItemThumbNailJSONPath: "thumbnails.default",
24  
25   // how many playlist items to display
26   maxNumListItems: 1,
27  
28   // event handlers
29   onApiChangeHandler: $.noop,
30   onErrorHandler: $.noop,
31   onPlaybackQChangeHandler: $.noop,
32   onPlaybackRChangeHandler: $.noop,
33   onReadyEvtHandler: $.noop,
34   onStateChangeHandler: $.noop,
35  
36   // playlist ID
37   playListId: undefined,
38  
39   // parent ID
40   playListParentId: undefined
41  
42 });

5. API methods:

view source
01 var myControler = $("#playerContainer").YTController({
02  
03     // options here
04  
05 });
06  
07 // Plays the video
08 myControler.play()
09  
10 // Stops the video
11 myControler.stop()
12  
13 // Pauses the video
14 myControler.pause()
15  
16 // Plays the previous video
17 myControler.previous()
18  
19 // Plays the next video
20 myControler.next()
21  
22 // Mutes the sound of the video
23 myControler.mute()
24  
25 // Unmutes the sound of the video
26 myControler.unmute()
27  
28 // Retrieves statistics about the video
29 myControler.stats()
30  
31 // Retrieves the video player object.
32 myControler.getPlayer()
33  
34 // Destroy and removes the player
35 myControler.destroy()

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

source : jqueryscript.net

Related posts: