Plain Javascript Events & Methods

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

Video Player Events & Mwthods for Javascript-based Embed Code

If you want to see a working demo of these options, you can find it at the following link.

Demo

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

Video Player Events and Method for Iframe Embed Code

Here is a working demo of with Iframe embed code.

Embed Player Controls

Here is how you can implement events and methods

 const player = new dyntube.Player(
        document.querySelector(".dyntube-responsive-iframe")
      );

      var playerTime = 0;

      player.on("ready", function () {
        console.log("Player is ready!");


        player.on("play", function () {
            console.log("Video started playing!");
          });

          player.on("pause", function () {
            console.log("Video paused!");
          });

          player.on("volumechange", function (volumeLevel) {
            console.log("Video volume changed:", volumeLevel);
          });

          player.on("timeupdate", function (currentTime) {
            playerTime=currentTime;
            console.log("Video time updated:", currentTime);
          });

          player.on("ended", function () {
            console.log("Video ended!");
          });

          player.on("fullscreenchange", function (isFullscreen) {
            console.log(
              "Fullscreen state changed:",
              isFullscreen ? "Entered Fullscreen" : "Exited Fullscreen"
            );
          });


        document.getElementById("btnPlay").addEventListener("click", () => {
          player.play();
        });

        document.getElementById("btnPause").addEventListener("click", () => {
          player.pause();
        });

        document.getElementById("btnMute").addEventListener("click", () => {
          player.mute();
        });

        document.getElementById("btnUnmute").addEventListener("click", () => {
          player.unmute();
        });

        document.getElementById("btnVolumeUp").addEventListener("click", () => {
          player.setVolume(1.0); // Full volume
        });

        document.getElementById("btnVolumeDown").addEventListener("click", () => {
          player.setVolume(0.3); // Lower volume
        });

        document.getElementById("btnFullscreen").addEventListener("click", () => {
          player.enterFullscreen();
        });

        document.getElementById("btnExitFullscreen").addEventListener("click", () => {
          player.exitFullscreen();
        });

        document.getElementById("btnSeekForward").addEventListener("click", () => {
          player.seek(playerTime + 10); // Seek forward by 10 seconds
        });

        document.getElementById("btnSeekBackward").addEventListener("click", () => {
          player.seek(playerTime - 10); // Seek backward by 10 seconds
        });
      });