Question

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

问题在于，当我单击搜索栏now() - sm.last_sent_date) * 24 * 60 * 60 > sm.delay时始终未定义。怎么可能在下面的代码中包含它？

player.pause()

JSBIN Link

Answer 1

登录undefined时，player.pause()没什么问题。这仅表示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时无法暂停视频

1 个答案: