CODEWITHSUNDEEP
javascriptvideo.js
Madawar
Madawar

Reputation: 507

Video.js Unable to pause video when SeekBar is clicked

Am trying to create a video where if a user clicks on the SeekBar it records the current time and also to pause the video on click event.

The issue is that when i click on the seekbar player.pause() is always undefined. How is it possible to include this in the below code?

<!DOCTYPE html>
<html>

<head>
    <title>JS Bin</title>
</head>

<body>
    <video id="player" class="video-js" controls preload="auto" width="640" height="264" poster="https://vjs.zencdn.net/v/oceans.png" data-setup="{}">
        <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    </video>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.1.0/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.1.0/video.js"></script>


    <script>
        videojs('player').ready(function() {
            var player = this;
            player.controlBar.progressControl.seekBar.on('mouseup', function(event) {
                var seekBarEl = this.el();
                var seekBarRect = videojs.dom.getBoundingClientRect(seekBarEl);
                var seekBarPoint = videojs.dom.getPointerPosition(seekBarEl, event).x;
                var duration = player.duration();
                var seekBarClickedTime = videojs.formatTime(seekBarPoint * duration, duration);
                console.log('Seekbar clicked time: ', seekBarClickedTime);
               player.pause();
              console.log(player.pause());
            });
        });
    </script>

</body>

</html>

JSBIN Link

Upvotes: 0

Views: 1263

Answers (1)

n1stre
n1stre

Reputation: 6086

There's nothing wrong about undefined when logging player.pause(). It simply means that pause method does not return anything. To make .pause() work you could invoke it from inside of the setTimeout function. Doing this will add your function to event queue and it will be invoked after players original mouseup handler:

<!DOCTYPE html>
<html>

<head>
    <title>JS Bin</title>
</head>

<body>
    <video id="player" class="video-js" controls preload="auto" width="640" height="264" poster="https://vjs.zencdn.net/v/oceans.png" data-setup="{}">
        <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    </video>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.1.0/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.1.0/video.js"></script>


    <script>
        videojs('player').ready(function() {
            var player = this;
            player.controlBar.progressControl.seekBar.on('mouseup', function(event) {
                var seekBarEl = this.el();
                var seekBarRect = videojs.dom.getBoundingClientRect(seekBarEl);
                var seekBarPoint = videojs.dom.getPointerPosition(seekBarEl, event).x;
                var duration = player.duration();
                var seekBarClickedTime = videojs.formatTime(seekBarPoint * duration, duration);
                console.log('Seekbar clicked time: ', seekBarClickedTime);

                setTimeout(() => player.pause(), 0);

                console.log(player.pause());
            });
        });
    </script>

</body>

</html>

And here's some simple example to get more understanding of what's going on:

const elem1 = document.querySelector('.test1');
const elem2 = document.querySelector('.test2');

elem1.addEventListener('click', () => {
  elem1.classList.add('clicked')
})

elem1.addEventListener('click', () => {
  elem1.classList.remove('clicked')
})

elem2.addEventListener('click', () => {
  setTimeout(() => elem2.classList.add('clicked'), 0)
})

elem2.addEventListener('click', () => {
  elem2.classList.remove('clicked')
})
.clicked {
  background: #000;
  color: #fff;
}
<button class="test1">test1</button>
<button class="test2">test2</button>

Upvotes: 1

Related Questions