In my Trigger Specific Actions on YouTube Video Player Events article, I described how to achieve granular control over a video’s playback and events using the YouTube IFrame API. It maintains the general pattern and structure of the now defunct JavaScript API, the only difference being how the player is instantiated. While not unduly complicated to work with, creative developers have managed to abstract it to make the API that much easier to use. A good example is Nirvana Tikku‘s jQuery YouTube TubePlayer Plugin. It captures most of the YouTube IFrame API functionality and includes everything you need to implement a YouTube player. In today’s article, we’ll explore the jQuery YouTube TubePlayer Plugin’s main functionality.
Download and Installation
The best place to get the plugin is from the author’s own site. You’ll find it on the Download tab. There, you’ll have two versions to choose from: a production-ready version that’s been minified using the Google Compiler, and a Development version that includes comments. Both links point to a single JavaScript file. There’s also a link to the project’s GitHub repository.
Once you’ve downloaded the library file, hook it up to your page, along with the main jQuery library. Note that the production version of the jQuery TubePlayer Plugin is named “jQuery.tubeplayer.min.js”, while the name of the dev version included below does not contain the “.min.” qualifier:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="jQuery.tubeplayer.js"></script>
Next, include a DIV element in the page that will contain the video player, just as you would with the regular YouTube IFrame Player.
Under it, place another SCRIPT block. There, obtain a reference to the video player DIV using the jQuery selector function. Chain it to the tubeplayer() constructor and voila, you’ve got yourself a player! It even includes a video by default: “Diddy – Dirty Money – Hello Good Morning featuring T.I., Rick Ross”. It’s the same one as on the jQuery TubePlayer Plugin site.
<div id='player'></div>
<script>
jQuery("#player").tubeplayer();
</script>
Adding Some Player Options
If you’d like to play another video, that’s easily done. The player constructor accepts an object of player options; one of those is the “initialVideo” that specifies a video ID. Other useful attributes include the width, height, allowFullScreen, preferredQuality, and autoPlay:
jQuery("#player").tubeplayer({
width: 600, // the width of the player
height: 450, // the height of the player
allowFullScreen: "false", // true by default, allow user to go full screen
initialVideo: "5EnL2WXsxNQ", // the video that is loaded into the player
preferredQuality: "medium", // preferred quality: default, small, medium, large, hd720
autoPlay: true // whether the player should autoplay the video, 0 or 1
});
There are plenty more options available. For the full list, refer to the API Reference tab.
Controlling the Player from other Controls
Upon initialization, a number of events are bound to the Player. These can be invoked directly by passing a string argument to the player constructor. Some events may require additional arguments. Most event triggers return the player so that you can chain multiple calls together. Here are a few event triggers bound to hyperlinks:
<a href="#" onClick='jQuery("#player").tubeplayer("play")'>
Play video
</a>
<a href="#" onClick='jQuery("#player").tubeplayer("pause")'>
Pause player
</a>
<a href="#" onClick='jQuery("#player").tubeplayer("stop")'>
Stop player
</a>
<a href="#" onClick='jQuery("#player").tubeplayer("mute")'>
Mute player
</a>
<a href="#" onClick='jQuery("#player").tubeplayer("unmute")'>
Unmute player
</a>
There are more of these as well. The GitHub docs have some great examples.
Player API Events
The TubePlayer exposes a number of useful events that you can attach handlers to in order to perform an action at certain times during playback. There’s the usual suspects, such as onPlay, onPause, onStop, onSeek, onMute, and onUnMute. There are also some player-specific ones like onPlayerUnstarted, onPlayerEnded, onPlayerPlaying, onPlayerBuffering, onPlayerCued, and onQualityChange. Finally, there are a few specialized events for handling errors that include onErrorNotFound, onErrorNotEmbeddable, and onErrorInvalidParameter.
It’s worth noting that onPlayerXXX methods are actually invoked by the player, whereas onXXX events are used for hooks when invoking tubeplayer to perform the desired operation. Hence in the following example, the onStop is not invoked unless you specifically call stop() by clicking on the “Stop player” link. However, when the video ends, the onPlayerEnded proceeds to execute and “rewinds” the video to the beginning.
jQuery("#player").tubeplayer({
initialVideo: "5EnL2WXsxNQ", // the video that is loaded into the player
onStop: function(){ alert('Stopped'); }, // after the player is stopped
onPlayerEnded: function(){
this.tubeplayer("seek", 0).tubeplayer("pause");
}
});
Conclusion
I don’t think that you’ll find an easier YouTube video player to use. I was able to get up and running in about two minutes. If anything will take time, it will be the coding of your event handlers, but then again, that’s exactly where the author of the jQuery TubePlayer Plugin intended to place the developement emphasis.
