Как я могу зациклить веб-видео без задержки?

Привет всем, я хочу запустить webm-видео в браузере с рабочего стола (с ПК). Теперь я зациклил webm с этим .js-файлом, который я нашел:

// ==UserScript==
// @name        Webm Looper
// @namespace   com.whatisthisimnotgoodwithcomputers.webmlooper
// @author      WhatIsThisImNotGoodWithComputers
// @description A userscript which automatically enables looping on Webm videos in your browser.
// @include       *.webm
// @run-at      document-start
// @version     1.0
// @grant       none
// ==/UserScript==

var vids = document.getElementsByTagName("video");
for (i = 0; i < vids.length; i++) 
 vids[i].setAttribute("loop", "true");

в Гризмонки. Это работает, но есть небольшая задержка в повторе/цикле. Это будет выглядеть, если я запущу gif в браузере. Теперь я искал решение и нашел кое-что на форуме:

Проблема с установкой currentTime в видео HTML5

Но это не работает в Greasemonkey. Это мой код в Greasemonkey:

// ==UserScript==
// @name        Loop
// @namespace   Loop
// @version     1
// @include *.webm
// @run-at      document-start
// @grant       none
// ==/UserScript==

var vids = document.getElementsByTagName("video");
vids.play();
vids.addEventListener('canplay', function() {
 this.currentTime = 5;
});

Вебм останавливается после первого запуска.

Настройка javascript показывает, что video.play(); это не функция и то же самое в addeventlistener.

Может быть, вы можете помочь мне с этой проблемой. Что я могу улучшить? Должен ли я установить что-то другое или изменить?

К сожалению, я только новичок в программировании.

Заранее спасибо!

С уважением


javascript html loops video webm
person Koby    schedule 05.07.2017    source источник
comment
какая причина не использовать атрибут loop в самом теге <video>?   -  person Offbeatmammal    schedule 05.07.2017
comment
Причина в задержке. есть небольшая задержка, если видео начинается снова с атрибутом цикла   -  person Koby    schedule 06.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

вам нужно отслеживать атрибут currentTime (для этого вы можете использовать событие timeupdate), и когда он приближается к концу (атрибут duration), вы можете сбросить его обратно к началу.

В приведенном ниже примере он использует событие loadedmetadata, чтобы узнать, когда продолжительность доступна для сценария, запускает воспроизведение видео и прикрепляет прослушиватель к timeupdate, который затем отслеживает currentTime

<html>
<head>
<title>Video Looper Page</title>
</head>
<body>

<video id="video" muted preload="metadata" controls>
    <source src="video.mp4" type="video/mp4" />
</video>

<script>
video = document.getElementById("video")
video.addEventListener("loadedmetadata",init)

function init() {
    video.removeEventListener("loadedmetadata",init)
    video.play()
    video.addEventListener('timeupdate', 
        funcloop=function(){
            if (video.currentTime >= (video.duration - 1)) {
                video.currentTime = 1;
                video.play()
            }
        }, false);
    }
</script> 

</body>
</html>

Вторая версия, демонстрирующая использование setInterval для управления циклом. Позволяет сократить интервал тестирования

<html>
<head>
<title>Video Looper Page</title>
</head>
<body>

<video id="video" muted preload="metadata" controls>
    <source src="video.mp4" type="video/mp4" />
</video>

<script>
video = document.getElementById("video")
video.addEventListener("loadedmetadata",init)

function init() {
    video.removeEventListener("loadedmetadata",init)
    video.play()
    t = setInterval(looper, 100);
}

function looper() {
    console.log(video.currentTime);
    if (video.currentTime >= (video.duration - 0.1)) {
        video.currentTime = 0.2;
        video.play()
    }
}

</script> 
</body>
</html>
person Offbeatmammal    schedule 05.07.2017
comment
Спасибо за код, но он не работает. Код выглядит разумно. :D Я скопировал код в Greasemonkey, Greasemonkey включен и правильный скрипт активен. Должен ли я что-то активировать? - person Koby; 06.07.2017
comment
это работает в Chrome - см. jsfiddle.net/ps3yuj7f - почему вы пытаетесь запустить это в Greasemonkey? чем сохранить его как веб-страницу и открыть в браузере? Если я это сделаю, он будет работать и в Firefox/Safari (по какой-то причине они не работают в Fiddle) - person Offbeatmammal; 06.07.2017
comment
В примере видео названо явным. Могу ли я запустить это - person Koby; 06.07.2017
comment
В примере видео названо явным. источник src=media.w3.org/2010/05/sintel/trailer.mp4 Могу ли я запустить это с любым видео или мне придется каждый раз менять источник? Правильно ли, что тогда браузер открывает только видеофайл, а не что-то еще из кода. Я хочу видеть только видео в браузере. Извините за вопросы новичка. Я надеюсь, что вы продолжите мне помогать. :D - person Koby; 06.07.2017
comment
Как я могу сохранить это как веб-страницу, чтобы я только дважды щелкнул видео с рабочего стола, чтобы открыть его, а затем запустить? Буду рад получить ответ еще раз. :D - person Koby; 06.07.2017
comment
Я бы прочитал эту статью - html5rocks.com/en/tutorials/video/basics — и некоторые основы разработки HTML/Javascript. SO на самом деле не является «учебным» сайтом, это скорее ответы на конкретные вопросы. - person Offbeatmammal; 06.07.2017
comment
Спасибо за основы. Но я не понимаю фона. Может, я слишком сложно мыслю. Но я не знаю, как это работает. Я попытался вставить веб-видео (интернет-видео) в скрипку. Это не работает. Можете ли вы показать мне, как вы сделали это с помощью Firefox и сохранения веб-страницы? - person Koby; 06.07.2017
comment
Вы знаете, как создать базовую веб-страницу? Возьмите код, который у меня есть в ответе (я добавлю остальную часть кода, чтобы сделать его автономным), и сохраните его как (например) test.html, затем откройте файл с помощью Firefox. - person Offbeatmammal; 06.07.2017
comment
Спасибо за вашу помощь. Код работает, но мне нужно кое-что настроить. Если текущее время слишком низкое, видео переходит к началу, но видео останавливается. Если текущее время равно 1, все в порядке. - person Koby; 07.07.2017
comment
есть две вещи, которые вы можете настроить, и это будет зависеть от длины видео... тест срабатывает, когда они находятся на расстоянии 1 секунды от продолжительности, поэтому вы можете изменить это число (особенно если видео очень короткое). ), а строка, которая устанавливает текущее время в 1, возвращается к отметке 1 с, может сделать это 0 или 0,5, если вам нужно. - person Offbeatmammal; 07.07.2017
comment
Возможно ли, что петля зависит от видео и аудио кодека? Может быть, он слишком медленно загружается из-за звука? Есть ли разница между timeupdate (работает в секундах) и settimeout (работает в мс)? Я читал, что timeupdate срабатывает, только если у нас есть время 0,25 с. - person Koby; 07.07.2017
comment
да, timeupdate не очень детализирован, использование settimeout даст вам больше детализации. Аудио и видео будут загружаться вместе. Как долго ваше видео? Если вы хотите убедиться, что все это загружено, замените событие loadedmetadata на canplaythrough, чтобы убедиться, что буферизовано достаточно. См. w3.org/2010/05/video/mediaevents.html. на все события - person Offbeatmammal; 07.07.2017
comment
Код работает, но у меня все еще есть задержка. Я играл с временными шагами, но безуспешно. Теперь я нашел это на форуме: ссылка Я хочу попробовать это . Я скачал jquery. может быть, вы снова сможете мне помочь... но только у вас хватит терпения со мной. :D - person Koby; 08.07.2017
comment
Я не понимаю, что вы имеете в виду под задержкой? можете ли вы поделиться реальным видео (если это огромный файл, то потенциально могут возникнуть проблемы с буферизацией). Другое решение, на которое вы ссылались, также будет работать, переключаясь между двумя копиями одного и того же видео. - person Offbeatmammal; 08.07.2017
comment
Я проверил свой веб-конвертер. (Premiere Pro) Если я конвертирую видео без звука, видео воспроизводится без проблем. Но если я вставлю звуковую дорожку, она будет работать с задержкой. Это странно. Теперь я хотел попробовать код копий видео. Мне нужен jquery? Я спрашиваю, потому что я не знаю, как я могу связать jquery и другой код. Где я должен поместить код для источника видео и так далее, если я использую jquery. Может быть, ты снова поможешь мне. ;) - person Koby; 09.07.2017
comment
предлагаю вам задать новый вопрос о помощи с решением jQuery, так как это будет отличаться от этого. Я подозреваю, что ваша кодировка видео может вызвать ту же проблему. Вы можете поделиться этим, чтобы мы могли увидеть проблему - person Offbeatmammal; 09.07.2017