Как получить текущее время видео в качестве события, чтобы функционировать и - PullRequest
Новая
       16

Как получить текущее время видео в качестве события, чтобы функционировать и

0 голосов
/ 10 июля 2019

все! Я новичок в JavaScript. Предположим, у меня есть видео, и я хочу, чтобы при его воспроизведении в течение определенного количества секунд (скажем, 5 секунд) выполнялась функция my_function (например, слово «пять» должно отображаться в консоли). По какой-то причине приведенный ниже код правильно отображает текущее количество секунд видео, но не отображает слово в консоли.

HTML: 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text</title>

</head>
<body>
    <div class="container">
        <video width="400" controls id="video">
          <source src="video/video.mp4" type="video/mp4">
          Your browser does not support HTML5 video.
    </video>
    <span class="timelapse" id='current'> </span>
    </div>
    <button id='getTime'>getTime</button>
</body>

 <script src="js/script.js"></script>
</html>

script.js: 

    var aud = document.getElementById('video');

aud.ontimeupdate = function(){myFunction()};

function myFunction(){
    document.getElementById('current').innerHTML = aud.currentTime;
    if (aud.currentTime == 5.0){
        console.log('Hello!');
    }
};

Спасибо!

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Я такой тупой! Я сравнил текущее время видео с конкретным номером (в примере из 5.0). Однако время видео, которое «захватывает» сценарий, может отличаться от 5.0: 5.1, 5.121, 5.132 ... и не может быть целым числом. Поэтому код не работал. Для отображения в консоли необходимо использовать: aud.currentTime> 5. Итак, правильный код: 

var aud = document.getElementById('video');

aud.ontimeupdate = function(){myFunction()};

function myFunction(){
    console.log();
    if(aud.currentTime > 5.0){
        console.log('Five')
    }
};

Но теперь у меня есть другой вопрос. Как заставить myFunction () выполняться только ОДИН РАЗ? Я пытался использовать это выражение: (aud.currentTime> 5.0) & (aud.currentTime <5.3), но это не гарантирует, что. </p>

Ответ здесь .

0 голосов
/ 10 июля 2019

Я думаю, что ваш слушатель событий может быть не прав

попробуйте это

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text</title>

</head>
<body>
    <div class="container">
        <video width="400" controls id="video">
          <source src="video/video.mp4" type="video/mp4">
          Your browser does not support HTML5 video.
    </video>
    <span class="timelapse" id='current'> </span>
    </div>
    <button id='getTime'>getTime</button>
</body>

 <script src="js/script.js"></script>
</html>

Script.js 

var aud = document.getElementById('video');
aud.addEventListener("timeupdate", myFunction)

function MyFunction(){
  if(aud.currentTime == 5){
    console.log('Hello') 
  }
}

Таким образомзатем прослушиватель событий будет обрабатывать изменения во времени, а затем должен выводить, когда время равно 5.

Ссылка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...