Video.js 单击 SeekBar 时无法暂停视频

Question

我正在尝试创建一个视频，如果用户点击 SeekBar，它会记录当前时间并在点击事件时暂停视频。

问题是当我点击搜索栏时 player.pause() 总是未定义。如何将它包含在下面的代码中？

<!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

Answer 1

记录 player.pause() 时 undefined 没有任何问题。它只是意味着 pause 方法没有 return 任何东西。要使 .pause() 工作，您可以从 setTimeout 函数内部调用它。这样做会将您的函数添加到 event queue，它将在 player 的原始 mouseup 处理程序之后被调用：

<!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>

下面是一些简单的例子，可以帮助您更好地理解正在发生的事情：

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>

Video.js 单击 SeekBar 时无法暂停视频

Video.js Unable to pause video when SeekBar is clicked

javascript

video.js