Javascript API of DynTube Player

Javascript API of DynTube Player

This page describes how you can handle the events of DynTube Video player using Javascript.

If you want to see a working demo of these event, you can find it at the following link https://www-demos.s3.us-east-1.amazonaws.com/options.html
https://www-demos.s3.us-east-1.amazonaws.com/options-events.html




        //DynTube ready to handle videos and channels using JS API
        //In this event you can call 'getChannel' function to get a video or a channel.

        window.addEventListener("dyntubeReady", () => {

        });


    




        window.addEventListener("dyntubeReady", () => {

            //Please provide the 'channelKey' attribute of a video or 'key' attribute of a channel to call getChannel function.
            var channel = dyntube.getChannel('tEOqk7aY7UuL9bUhB6NOw');

            //A video channel may have more than one videos, so this is how you can get reference to a video player.
            let player = channel.current.video.player;


        });



    

Video Player Methods

Below are some examples to use the available methods.



        window.addEventListener("dyntubeReady", () => {

            //Please provide the 'channelKey' attribute of a video or 'key' attribute of a channel to call getChannel function.
            //don't get confused by the function name 'getChannel' as it is used to get channels as well as videos.
            var channel = dyntube.getChannel('tEOqk7aY7UuL9bUhB6NOw');

            //A video channel may have more than one videos, so this is how you can get reference to a video player.
            let player = channel.current.video.player;


            //Below are some common methods that you can call

            //Play video
            player.play();
    
            //Pause video
            player.pause();

            //Mute video
            player.muted(true);

            //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 the video player events.



        window.addEventListener("dyntubeReady", () => {

            //Please provide the 'channelKey' attribute of a video or 'key' attribute of a channel to call getChannel function.
            //don't get confused by the function name 'getChannel' as it is used to get channels as well as videos.
            var channel = dyntube.getChannel('tEOqk7aY7UuL9bUhB6NOw');

            //A video channel may have more than one videos, so this is how you can get reference to a video player.
            let player = channel.current.video.player;


            //This event gets fired when time is update for the video.
            channel.on('timeupdate', function (time) {
            console.log(time);
            });

        
            //This events get fired when video starts playing.
            channel.on('play', function () {
            console.log('play');
            });
        
            //This event gets fired when video is paused.
            channel.on('pause', function () {
            console.log('pause');
            });

        
            //This event gets fired when video is ended.
            channel.on('ended', function () {
            console.log('ended');
            });
        
            //This events get fired when there is a volume change
            channel.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 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);
        });