Ускорение поиска видео в HTML5?

Question

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

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

slide: function(e, ui){
    seeksliding = true;
    $gVideo[0].currentTime = ui.value;
},

Answer 1

Современные браузеры, как правило, очень хороши в быстром поиске, даже до того момента, когда вы можете синхронизировать два или более видео с использованием Javascript с той же функциональностью, которую вы описываете. (Firefox около версии 4-5 займет несколько лишних миллисекунд и потеряет синхронизацию, но теперь это лучше.)

Код, который у вас есть, должен работать, если ui.value находится между нулем и продолжительностью видео. Но вы можете столкнуться с проблемами, если а) видео не загружено или б) что-то не так с закодированным видеофайлом.

Сначала убедитесь, что браузер может воспроизводить видео и искать без каких-либо элементов управления Javascript. Просто попробуйте открыть файл в браузере, сначала с жесткого диска, а затем с сети. Если вы не можете искать с помощью встроенных элементов управления, вы не можете искать с помощью Javascript. Иногда я видел ошибки поиска, решаемые перекодированием видео без B-Frames .

Далее, посмотрите, загружается ли видео, когда вы пытаетесь найти. Вы можете ускорить это, добавив атрибут preload к тегу video. И убедитесь, что событие слайдера не включено, пока в браузере не будет установлена ​​продолжительность видео, поместив код слайдера в событие loadedmetadata.