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.

https://www-demos.s3.us-east-1.amazonaws.com/js-player-options.html

PLAYER EVENTS & OPTIONS

//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);
        });