JavaScript addEventListener пауза и воспроизведение видео - PullRequest
Новая
       13

JavaScript addEventListener пауза и воспроизведение видео

0 голосов
/ 27 мая 2018

У меня есть видео в моем HTML.Я хотел бы, чтобы видео было приостановлено через 5 секунд после воспроизведения, поэтому я использовал addEventListener.У меня также есть 2 кнопки, которые вызывают либо рестарт () или прыжок ().

При воспроизведении видео вызывается EventListener.Он останавливается на 5 секунд, но я не могу воспроизвести его через 5 секунд (я пытался удалить слушателя, но затем видео больше не приостанавливается).Когда я вызываю jump (), это займет у меня 10 секунд, но продолжит делать паузу, когда я попытаюсь воспроизвести его.Когда я вызываю reset (), видео будет воспроизводиться до 5 секунд снова, что имеет смысл, так как у меня есть слушатель.Как заставить его играть через 10 секунд, когда я вызываю jump ()?Сначала я подумал, что мне придется удалить мой слушатель, но я думаю, что он мне все еще нужен, потому что я хотел бы, чтобы видео было приостановлено на 15 секунд.Или, может быть, мне нужно вызвать removeEventListener где-нибудь еще?

js 

var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
    this.pause();       
}
});


function restart(){
    video.currentTime = 0;
}

function jump(){ 
    video.currentTime = 10; 
    if (video.currentTime >=15){
       video.pause
    }
}

html 

<video id="myvid" width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<button onclick="restart()">restart</button>
<button onclick="jump()">jump</button>

1 Ответ

0 голосов
/ 27 мая 2018

Вы должны сохранить время паузы в переменной.Тогда вы можете использовать его в функции перехода: 

var video = document.getElementById( 'myvid' ),
    pausedtime = 0;

video.addEventListener( 'timeupdate', function() {
    if ( this.currentTime >= pausedtime + 5 ) {
        this.pause();
        pausedtime = this.currentTime
    }
});

function restart(){
    video.currentTime = 0;
    pausedtime = 0;
    video.play()
}

function jump(){
    pausedtime += 5;
    video.currentTime = pausedtime;
    video.play()
}
<video id="myvid" width="320" height="240" controls>
    <source src="http://iandevlin.com/html5/media-player/parrots.mp4.mp4" type="video/mp4">
    <source src="http://iandevlin.com/html5/media-player/parrots.webm" type="video/webm">
</video>

<br>

<button type="button" onclick="restart()">Restart</button>
<button type="button" onclick="jump()">Jump</button>
...