Сделать запуск видео HTML5 с указанного currentTime в Chrome - PullRequest
Новая
       8

Сделать запуск видео HTML5 с указанного currentTime в Chrome

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

Я хочу позволить пользователю нажать кнопку, чтобы зациклить видео HTML5 в указанное время начала, которое не равно 0, и указанное время окончания, которое не является концом всего видео.

Я не хочу, чтобы видео постоянно было определенной длины.В конечном итоге я хочу дать пользователю несколько кнопок, чтобы они могли зацикливаться на разных интервалах видео.

Это работает в Firefox, но не в Chrome.Не выдается никаких ошибок, но кажется, что Chrome не регистрирует мои currentTime назначения.Он начинается с 0, а не с указанного времени начала, но заканчивается в указанное время окончания.Это петли.Проблема только в времени начала.

SSCCE:

HTML: 

<body>
    <video src="./example.mp4" width="480" controls></video>
    <div><button id="storyText">Loop</button></div>
</body>

JS: 

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

    $('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);
        }
    }    
});

РЕДАКТИРОВАТЬ: Я также попытался вложить код в мой документ.функция ready в прослушивателе событий, который прослушивает событие canplay или loadedmetadata.Ни одна помощь.

JS: 

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

    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);
            }
        }    
    }
});

РЕДАКТИРОВАТЬ: Я использую сервер для обслуживания его на локальном хосте, и именно здесь возникают проблемы.Если я открою статическую страницу прямо в веб-браузере, это нормально.

...