Links

Plain Javascript Events & Methods

This page describes how you can handle the events of the DynTube Video player using Javascript.
If you want to see a working demo of these options, you can find it at the following link.
//You can use the 'dyntubePlayerReady' event to get access to the video & the player.
window.addEventListener("dyntubePlayerReady", (event) => {
var video = event.video;
var player = event.player;
});

Video Player Methods

window.addEventListener("dyntubePlayerReady", (event) => {
var video = event.video;
var player = event.player;
//Below are some common methods that you can use
//Mute video
player.muted(true);
//Play video
player.play();
//Pause video
player.pause();
//Unmute video
player.muted(false);
//a decimal number between 0 (muted) and 1.0 (full volume)
//Set volume to 90%
player.volume(.9);
//Set volume to 30%
player.volume(.3);
//Forward 10 seconds
player.currentTime(player.currentTime() + 10);
//Backward 10 seconds
player.currentTime(player.currentTime() - 10);
//set video playback rate to 1x
player.playbackRate(1);
//set video playback rate to 2x
player.playbackRate(2);
});

Video Player Events

Below are some examples to handle video player events.
window.addEventListener("dyntubePlayerReady", () => {
var video = event.video;
var player = event.player;
//This event gets fired when time is update for the video.
player.on('timeupdate', function (e) {
console.log(player.currentTime());
});
//This events get fired when video starts playing.
player.on('play', function () {
console.log('play');
});
//This event gets fired when video is paused.
player.on('pause', function () {
console.log('pause');
});
//This event gets fired when video is ended.
player.on('ended', function () {
console.log('ended');
});
//This events get fired when there is a volume change
player.on('volumechange', function () {
console.log('volumechange');
});
});

JQuery Examples

Below are some Jquery examples to handle the video player on button clicks.
//Play the video when the button with Id 'btnPlay' is clicked
$('#btnPlay').click(() => {
player.play();
});
//Pause the video when button with Id 'btnPause' is clicked
$('#btnPause').click(() => {
player.pause();
});
//Mute the video when button with Id 'btnMute' is clicked
$('#btnMute').click(() => {
player.muted(true);
});
//Mute the video when button with Id 'btnUnMute' is clicked
$('#btnUnMute').click(() => {
player.muted(false);
});