Принудительное воспроизведение коротких видео HTML5 в Safari

Question

У меня возникли проблемы с Safari и элементом <video> в сочетании с более короткими высококачественными видео. Для веб-сайта витрины я загружаю 12-15 секунд .mp4 и .webm файлов в контейнер <video> с использованием элемента <source>. При попытке воспроизведения видео в Chrome он работает безупречно, и видео начинает играть почти мгновенно, но Safari, похоже, хочет полностью загрузить видео до начала воспроизведения.

Я искал загрузку видео непосредственно через атрибут src<video>, а также добавил атрибут preload="auto" в попытке принудительного немедленного воспроизведения.

Я настроил пример, используя один из видео, которые мы используем на веб-сайтах, что составляет около 8 МБ и длиной 12 секунд: https://jsfiddle.net/n1eac46v/

var video = document.getElementById('video'); 
var source = document.createElement('source'); 

source.src = "foo.mp4"; 
source.type = "video/mp4"; 

video.appendChild(source); 
video.on("canplay canplaythrough", video.play); 

Как вы можете видеть, я также прослушивание canplay и события canplaythrough, но даже это не помогает. Я смотрел повсюду в течение нескольких дней подряд, но сейчас у меня заканчиваются варианты.

Answer 1

Я не являюсь пользователем OS X, поэтому у меня нет опыта работы с Safari, однако у меня была возможность отладить воспроизведение mp4 в Chrome. У Chrome есть окно буферизации, которое он пытается заполнить, пока не начнет фактическое воспроизведение. У Safari может быть больше окна. Кроме того, поскольку в обычных случаях все таблицы, содержащие образцы позиций, длительности и т. Д., Находятся в конце файла, браузер может захотеть прочитать их, чтобы начать воспроизведение. Интеллектуальный браузер может отправлять чтение с заголовком байтового диапазона, чтобы получить только конец файла, а затем искать фактические видеоданные, но опять же я понятия не имею, что делает сафари.

Что вы можете попробовать - использовать MP4Box в ваших видеофайлах, чтобы переместить метаданные и все таблицы в начало, что могло бы помочь.

Как упомянуто OP в комментариях с использованием FFmpeg с -movflags faststart (см. FFmpeg MP4 options), также можно использовать для достижения этого.