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>
from Video.js Unable to pause video when SeekBar is clicked
No comments:
Post a Comment