This jQuery plugin is helpful to add a YouTube video into your application using JavaScript.
I created this code based on the YouTube API.
This plugin is also available on Bower.
bower install player-tube
To add a YouTube video in your application, first you have to create the HTML tag that will be the video container. In this tag you can set the video-id attribute (required), as other optionals. After, you'll need call your HTML tag using jQuery.
<div class="my-player" video-id="zdaTtlxUoOM"></div>
$('.my-player').playerTube();
But, it's not only this!!!
The HTML tag gives more options to customize.
Type: Number
Default: 0
1 - To display the mosaic when the video ended.
<div class="my-player" video-id="zdaTtlxUoOM" video-show-mosaic="1"></div>
Type: Number
Default: 0
1 - To display the player controls.
<div class="my-player" video-id="zdaTtlxUoOM" video-show-controls="1"></div>
Type: Number
Default: 0
1 - To display on top the infos about the video.
<div class="my-player" video-id="zdaTtlxUoOM" video-show-info="1"></div>
Type: Number
Default: 0
1 - Auto play the video when called the jQuery plugin.
<div class="my-player" video-id="zdaTtlxUoOM" video-auto-play="1"></div>
Type: Number
Default: 0
1 - To define video volume to zero.
<div class="my-player" video-id="zdaTtlxUoOM" video-mute="1"></div>
Type: Number
Default: 0
1 - Auto play the video when is completed.
<div class="my-player" video-id="zdaTtlxUoOM" video-loop="1"></div>
Type: String
Default: undefined
String of youtube list id.
<div class="my-player" video-id="zdaTtlxUoOM" video-list="UUifNHhodYK0S7A_QoxmsoCA"></div>
Type: function
Default: undefined
This event is dispatched when the player is loaded.
$('.my-player').playerTube({
onReady: function (e) {
console.log(e.type, e);
}
});
Type: function
Default: undefined
This event is dispatched when the video start to play.
$('.my-player').playerTube({
onPlay: function (e) {
console.log(e.type, e);
}
});
Type: function
Default: undefined
This event is dispatched when the video is paused.
$('.my-player').playerTube({
onPaused: function (e) {
console.log(e.type, e);
}
});
Type: function
Default: undefined
This event is dispatched when the video is completed.
$('.my-player').playerTube({
onFinished: function (e) {
console.log(e.type, e);
}
});
Type: function
Default: undefined
This event is dispatched when the video is loading.
$('.my-player').playerTube({
onBuffering: function (e) {
console.log(e.type, e);
}
});
Type: function
Default: undefined
This event is dispatched when the video is playing. Providing some useful information about the video state.
$('.my-player').playerTube({
onUpdate: function (e) {
console.log(e.type);
console.log('currentTime', e.currentTime);
console.log('totalTime', e.totalTime);
console.log('percentViewed', e.percentViewed);
}
});
To you control the player with the YouTube Api methods and vars, you can use this:
window.playersTube.getPlayerById('zdaTtlxUoOM').playVideo();
