1

I am including the video in a webpage and i don't want to use the video control loops. So i wrote the normal js to pause ,play and stop. Whenever i try to play the video, the video window is going beyond the screen size and unable to re-size it.I tried using the css to resize it ,but it's not working. This is the script

  <script>
  var width = window.innerWidth;
  var height = window.innerHeight;

  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
  });

  var layer = new Konva.Layer();
  stage.add(layer);

  var video = document.createElement('video');
  video.src ='carlavideo.mp4'
  var image = new Konva.Image({
    image: video,
    draggable: true,
    x: 50,
    y: 20,
  });
  layer.add(image);

  var text = new Konva.Text({
    text: 'Loading video...',
    width: stage.width(),
    height: stage.height(),
    align: 'center',
    verticalAlign: 'middle',
  });
  layer.add(text);

  layer.draw();

  var anim = new Konva.Animation(function () {
  }, layer);

  video.addEventListener('loadedmetadata', function (e) {
    text.text('Press PLAY...');
    image.width(video.videoWidth);
    image.height(video.videoHeight);
  });

  document.getElementById('play').addEventListener('click', function () {
    text.destroy();
    video.play();
    anim.start();
  });
  document.getElementById('pause').addEventListener('click', function () {
    video.pause();
    anim.stop();
  });
  document.getElementById('stop').addEventListener('click',function(){
         video.currentTime = 0;
          video.load();
  })

</script>

and the buttons i used are here

    <div class="jumbotron">
          <div class="container">
            <h1 class="display-4">Game Controls</h1>
            <hr class="my-4">
            <button id="play" class="btn btn-success  ">Play</button>
            <button id="pause" class="btn btn-warning butt">Pause</button>
            <button id="stop" class="btn btn-danger butt">Stop</button>
          </div>
  </div>
Giriteja Bille
  • 168
  • 1
  • 13

0 Answers0