Как определить, сможет ли браузер локальный видео файл в данном формате?

Question

[Сергей Соколов]

Пользователь загружает на сайт видео. Выбирает локальный видеофайл с компа/телефона и хочется сразу его показать, если есть такая возможность. Поверх там делает превью «оформления» этого видео, пользователь выбирает вариант.

mp4 вроде бы показывает без проблем, а вот .mov – не всегда. Бывает, идёт звук и черный экран (в браузере).

Как можно средствами браузера/JS сразу определить, воспроизоведется ли нормально данный файл в данном окружении?

videoElement.canPlayType() возвращает ободряющее "maybe" и на video/mp4 и на video/quicktime. Что не прибавляет определённости.

Два файла, оба .mov – один проигрывается нормально, другой с черным экраном. Хочется через JS почувствовать разницу.

Comments

[hckn]

Поверх там делает превью «оформления» этого видео

А что за "оформление"? На сервере обрабатываете видео?

[Сергей Соколов]

hckn, посетитель загружает свое видео и выбирает один из вариантов «дизайна» – поверх видео накладываются брендированные штуки по краям. Рендерится на сервере, потом. А до отправки надо примерно показать, как будет выглядеть: несколько вариантов PNG показываем поверх видео плеера в странице.

Вот для случая, если никак не показать сразу, придётся сначала отправлять на сервер, там либо перерендерить в точно-показываемый формат видео, либо просто выдернуть несколько кадров как картинки и показать для выбора «дизайна» их.

[hckn]

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

А что на беке? ffmpeg? Чем обработка видео происходит? Т

[Сергей Соколов]

hckn, если локальное видео играбельно в браузере клиента, то сразу же показываем (не ждём аплоада видео на серв, выдирания кадра и загрузки кадра в браузер) и предлагаем попробовать поверх разные картинки. Поверх играющего видео. А генерить thumbnail из видео на сервере - это fallback на случай, когда видео неиграбельно в браузере.

На бэке ffmpeg, родимый.

Answer 1

[Александр Вульф]

https://stackoverflow.com/questions/7451635/how-to...

Comments

[Сергей Соколов]

Был там. canPlayType возвращает ободряющее "maybe" и на video/mp4 и на video/quicktime. Т.е. не прибавляет определённости.

Два файла, оба .mov – один проигрывается нормально, другой с черным экраном. Хочется через JS почувствовать разницу.

[Александр Вульф]

Сергей Соколов, так он и возвращает maybe потому что mov - это медиаконтейнер. В нем может лежать что угодно, как в архиве. Надо уточнять кодеки.

[Сергей Соколов]

Александр Вульф, вот я и интересуюсь, как в JS узнать, годны ли кодеки для воспроизведения или нет.

[Александр Вульф]

Сергей Соколов, canPlayType( 'video/webm; codecs="vp8, vorbis"' )
ну там же написано.

[Сергей Соколов]

Александр Вульф, откуда взять эти кодеки, если просто вот есть объект File - накинутый в дропзону локальный видеофайл

[Дмитрий Беляев]

Сергей Соколов, прочитать файл с помощью FileReader и извлечь инфу о кодеках
спека: https://developer.apple.com/library/archive/docume...

[Сергей Соколов]

Дмитрий Беляев, похоже всё проще решается. Создаю элемент video, в него URL.createObjectURL(File). Если из этого плеера удаётся взять ненулевые videoWidth и videoHeight – значит, видео проигрывается. Иначе они по нулям.