Завершите цикл видео HTML5 нажатием в любом месте документа - PullRequest
Новая
       21

Завершите цикл видео HTML5 нажатием в любом месте документа

0 голосов
/ 03 октября 2018

У меня есть видео в формате HTML5, которое я установил для цикличного выполнения через определенный интервал после нажатия кнопки.

Пользователь должен иметь возможность выйти из цикла щелчком мыши в любом месте документа.Видео должно остановиться.

В моем текущем коде событие click регистрируется только время от времени или не регистрируется вообще.

HTML: 

<body>
    <video src="./example.mp4" width="480" type="video/mp4" controls></video>
    <button>Test</button>
</body>

JS: 

$(document).ready(function() {
    var video = document.getElementsByTagName('video')[0];
    var timeStamp = [7, 8];

    video.addEventListener('canplay', execute);

    function execute() {
        video.removeEventListener('canplay', execute);
        $('button').click(function() {
            playVideoInterval(timeStamp[0], timeStamp[1]);
        });

        function playVideoInterval(start, end) {
            video.addEventListener('timeupdate', loop);
            video.currentTime = start;

            document.body.addEventListener('click', endLoop, true);
            video.play();

            function loop() {
                if (this.currentTime >= end) {
                    video.currentTime = start;
                    video.play();
                }
            }

            function endLoop() {
                video.pause();
                document.body.removeEventListener('click', endLoop);
                video.removeEventListener('timeupdate', loop);
                console.log('hi');

            }
        }    
    }
});

1 Ответ

0 голосов
/ 03 октября 2018

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

Я использовал event.stopPropagation(); для кнопки, а затем прослушиватель событий документа для паузы.У меня не было времени полностью переделать ваш код, реструктурировать его.

Этот пример будет работать во фрагменте. 

var video = document.getElementsByTagName('video')[0];
var timeStamp = [7, 8];
var loop = false

function execute() {
    video.removeEventListener('canplay', execute);
    $('button').click(function() {
        playVideoInterval(timeStamp[0], timeStamp[1]);
    });

    function playVideoInterval(start, end) {
        video.addEventListener('timeupdate', loop);
        video.currentTime = start;

        document.body.addEventListener('click', endLoop, true);
        video.play();

        function loop() {
            if (this.currentTime >= end) {
                video.currentTime = start;
                video.play();
            }
        }

        function endLoop() {
            document.body.removeEventListener('click', endLoop);

            video.removeEventListener('timeupdate', loop);

            video.pause();

        }
    }
}

$(".play").on("click", function(event) {
    event.stopPropagation();
    execute()

});

$(document).on("click", function(e) {
    if (!$(e.target).is('.play')) {
        // do something
        video.pause()
    }


});
<!DOCTYPE html> 
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <body>
      <video width="200" id="myVideo" height="150" autoplay controls>
         <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4" />
      </video>
  <button class="play" width="100px" height="100px" style="display:block; width:500px; height:100px;">Test</button>
   </body>
</html>
...