text: import React, { Component } from 'react';
  import VideoPlayer from 'react-video-js-player';
   
  class ATM extends Component {
      player = {}
      state = {
          video: {
              src: "https://fiservseminars-media.s3.amazonaws.com/Videos/ATM+Managed+Services+-+The+ATM+Channel+in+the+New+Normal.mp4",
              poster: "https://fiservseminars-media.s3.amazonaws.com/VideoOverlay.png"
          }
      }
   
      onPlayerReady(player){
          console.log("Player is ready: ", player);
          this.player = player;
      }
   
      onVideoPlay(duration){
          console.log("Video played at: ", duration);
      }
   
      onVideoPause(duration){
          console.log("Video paused at: ", duration);
      }
   
      onVideoTimeUpdate(duration){
          console.log("Time updated: ", duration);
      }
   
      onVideoSeeking(duration){
          console.log("Video seeking: ", duration);
      }
   
      onVideoSeeked(from, to){
          console.log(`Video seeked from ${from} to ${to}`);
      }
   
      onVideoEnd(){
          console.log("Video ended");
      }
   
      render() {
          return (
              <div className="live-video-session">
                  <VideoPlayer
                      controls={true}
                      src={this.state.video.src}
                      poster={this.state.video.poster}
                      width="450"
                      height="300"
                      onReady={this.onPlayerReady.bind(this)}
                      onPlay={this.onVideoPlay.bind(this)}
                      onPause={this.onVideoPause.bind(this)}
                      onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
                      onSeeking={this.onVideoSeeking.bind(this)}
                      onSeeked={this.onVideoSeeked.bind(this)}
                      onEnd={this.onVideoEnd.bind(this)}
                  />
              </div>
          );
      }
  }
  export default ATM;