запускать и останавливать фоновое видео при переходах по ссылкам навигации с помощью jQuery или js? - PullRequest
Новая
       1

запускать и останавливать фоновое видео при переходах по ссылкам навигации с помощью jQuery или js?

0 голосов
/ 12 марта 2020

Я нажимаю "домашнюю" навигационную ссылку, фоновое видео начинается, а затем останавливается через несколько секунд. я нажимаю «о», видео начинается снова, где оно останавливается последним, и воспроизводится несколько секунд. и продолжайте через клики навигационной панели.

Это то, что я придумал до сих пор. Я игнорирую создание фонового видео прямо сейчас и просто пытаюсь контролировать запуск и остановку с помощью простой кнопки. видео не начнется при нажатии кнопки. Есть идеи? 

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

<body>




<a href="#" onclick="play1()"> clickme </a>


<video width="800" height="600" 
       name="Video Name" src="2160p.mov"></video>

<script   src="https://code.jquery.com/jquery-3.4.1.js"   integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="   crossorigin="anonymous"></script>

<script>
function play1(){
document.getElementById("2160p.mov").currentTime=3;
document.getElementById("2160p.mov").play();
setTimeout(3000,"stopvideo()")
}
function stopvideo(){
document.getELementById("2160p.mov").stop();

}
    </script>

</body>
</html>

1 Ответ

1 голос
/ 12 марта 2020

Несколько проблем здесь:

  • Ваш тег video не имеет установленного id, но вы звоните document.getElementById("2160p.mov"), что, очевидно, не работает. Вы можете исправить это, сначала добавив любой идентификатор к video.
  • setTimeout(3000,"stopvideo()") синтаксис неверен. Правильный путь - setTimeout(stopvideo, 3000). Для получения дополнительной информации: setTimeout()
  • Кроме того, HTML Video element (<video>) не имеет события stop и (). Вместо этого вы можете использовать pause() для получения желаемого результата. Есть много других событий , которые вы можете проверить, которые могут помочь.

Итак, обновите ваш HTML как: 

<video id="myVideo" width="800" height="600" name="Video Name" src="2160p.mov"></video>

, а затем обновите Ваш js код, такой как: 

function play1() {
   document.getElementById("myVideo").currentTime = 3;
   document.getElementById("myVideo").play();
   setTimeout(stopvideo, 3000);
}

function stopvideo() {
   document.getElementById("myVideo").pause();
}

DEMO: 

function play1() {
   document.getElementById("myVideo").currentTime = 3;
   document.getElementById("myVideo").play();
   setTimeout(stopvideo, 3000);
}

function stopvideo() {
   document.getElementById("myVideo").pause();
}
<a href="#" onclick="play1()">Play</a><br/>
<video id="myVideo" width="400" height="300" name="Video Name" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...