Mp4 воспроизводится не в Chrome или Firefox, а в Safari

У меня очень странная проблема. Фоновое видео на этот сайт воспроизводится в Safari, но не в Chrome или Firefox.

Добавляя атрибут «управление» с помощью инструментов разработчика, я вижу правильную продолжительность видео. Но вроде видео вообще прозрачное.

Та же проблема возникает, когда вы открываете ссылку на видео напрямую: neomotionstudio-reel-2019.mp4

Спасибо, что заглянули!

Ваш файл огромен (67 МБ за 52 секунды!) И, похоже, имеет некоторые неработающие атрибуты. После преобразования через этот сайт я смог воспроизвести его в Chrome.

Avraham 18.03.2019 10:33

Текущий кодек для вашего видео — H.265, который не поддерживается все же Chome, и Firefox измените его на H.264, и он будет работать Дополнительная информация

Core972 18.03.2019 10:34

@Core972 спасибо. Вот в чем проблема! Большое спасибо за очень быстрый ответ!!

user2437272 18.03.2019 10:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
2 849
2

Ответы 2

Проблема решена: моушн-дизайнер экспортировал видео в формате HEVC/H.265 вместо видеоформата H.264, который не поддерживается Firefox и Chrome.

Это проблема формата видео. Не каждый браузер знает, как декодировать каждый формат видео, вы можете прочитать эта страница на MDN, чтобы узнать больше.

Простое решение — перекодировать видео. Вот пример использования ffmpeg:

ffmpeg -i http://www.neomotion.studio/wp-content/uploads/2019/03/neomotionstudio-reel-2019.mp4 video.mp4

Это должно дать вам файл, работающий в Chrome и Firefox.

Это не сработает. Firefox требует очень специфических спецификаций кодирования, чтобы на самом деле работать, тогда как Chrome и Edge более слабы. OP нужно будет изучить все эти причуды, прежде чем ffmpeg слепо перекодирует видео (например, Firefox требует yuvj420p, он не будет работать с yuv420p).

Enverex 28.03.2021 14:04

Другие вопросы по теме