Google Chrome не хочет воспроизводить mp4 с помощью mediaelement.js

Я использую последнюю версию mediaelement.js на своем веб-сайте для воспроизведения видео html5. Что-то странное в Google Chrome. Он воспроизводит одно видео, но не хочет воспроизводить другое видео в формате mp4 и не откатывается на webm. Оба видео были преобразованы с помощью ffmpeg с такими параметрами:

ffmpeg -i input.mov -acodec libfaac -ab 96k -vcodec libx264 -vpre slower -vpre main -level 21 -refs 2 -b 345k -bt 345k -threads 0 -s 640x360 output.mp4

Кроме того, первое видео нормально воспроизводится без использования библиотеки mediaelement.js в формате mp4, а второе превращается в формат webm.

Примеры страниц из http://random.net.ua/video_test/:

  • http://random.net.ua/video_test/video1.html (ok)
  • http://random.net.ua/video_test/video2.html (ok)
  • http://random.net.ua/video_test/video1-mediaelement.html (ok)
  • http://random.net.ua/video_test/video2-mediaelement.html (провал)

person rndm    schedule 09.07.2012    source источник
comment
Та же проблема в Mac OS x Lion, chrome 21.0.x, даже видео на главной странице официального сайта mediaelements.js не воспроизводятся. Но это же видео хорошо воспроизводится в Windows7 с той же версией Chrome.   -  person xiefei    schedule 26.08.2012
comment
только что сегодня возникли проблемы с версией 25.0.1319.0 canary, воспроизводящей видео в формате mp4, которые отлично воспроизводятся в Firefox или Safari.   -  person Mark Essel    schedule 08.11.2012
comment
Возникла эта проблема на двух ПК с Windows 7 с Chrome 24. Большинство других ПК с Windows 7 в том же офисе не имеют проблем с Chrome 24, что делает эту проблему действительно раздражающе странной.   -  person Oskar Duveborn    schedule 18.02.2013
comment
После поиска в офисе мы обнаружили семь ПК с Chrome 24-26, на которых не отображается видео какого-либо популярного резервного решения, такого как videojs, me.js или jw — примерно 1/4 протестированных ПК имеют эту проблему, и многие рабочие настройки имеют общие характеристики с нерабочими - на самом деле не найдено разумной причины, за исключением того, что решение для me.js, приведенное ниже, позволяет обойти проблему.   -  person Oskar Duveborn    schedule 19.02.2013


Ответы (3)


Если вы попытаетесь выполнить $("video").get(0).currentSrc или эквивалент в консоли, вы увидите, что версия без mediaelement.js воспроизводит видео Webm, которое Chrome может воспроизводить очень хорошо, но если вы посмотрите на то же самое в версии mediaelement.js, это пытаюсь воспроизвести MP4.

Затем, если вы посмотрите на $("video").get(0).error, вы увидите, что у вас есть MediaError. Осмотрите это, и вы увидите, что у него есть «код 4». Согласно спецификации это MEDIA_ERR_SRC_NOT_SUPPORTED.

Теперь попробуйте $("video").get(0).canPlayType("video/mp4") -- он возвращает "maybe".

Сейчас это догадки, но, возможно, Chrome сообщает «возможно», потому что он может воспроизводить некоторые профили MP4, но не другие. Независимо от причин, я лично предпочел бы, чтобы Mediaelement.js рассматривал «может быть» как «нет» и запускал резервную копию Flash, если ни один из других исходных типов не воспроизводится изначально. Это достаточно легко исправить, чтобы сделать это. Я сделал именно это на только что созданной вилке — взгляните на https://github.com/tremby/mediaelement/tree/maybe-to-no

Надеюсь, это поможет. Дайте мне знать, если это сработает для вас - я надеюсь, что в вашем случае он откажется от MP4 и вместо этого попробует Webm. В моем собственном проекте (отладка которого привела меня к этому вопросу) у меня есть только файл MP4, и резервный вариант Flash с радостью занимает свое место.

person tremby    schedule 01.12.2012
comment
+1 это беспокоило меня достаточно долго, пока я не нашел этот ответ, за который я бы проголосовал сто раз, если это возможно. Спасибо. - person Oskar Duveborn; 15.02.2013

с помощью Media Source API...

Я понимаю, что это не относится к резервному варианту, указанному выше, но я думаю, что важно указать, что резервный вариант для webm не требуется, если видео MP4 закодированы соответствующим образом.

Видео MP4 также можно закодировать для поддержки Media Source API, который позволяет загружать фрагменты, которые делают видео доступным до завершения загрузки всего файла.

Реализация MP4 используется более широко, и в большинстве браузеров для нее не требуется запасной вариант webm.

Диаграмма, показывающая поддержку форматов видео для Media Source API здесь< /сильный>.

FFmpeg сделает это, и его исходный код будет открытым.

См. здесь: ( Кодируйте видео H.264 и WebM для MediaElement.js с помощью FFmpeg) ниже:


Крис Коулсон пишет: 14 июня 2012 г. (Windows)

Недавно я добавил видеоплеер на сайт клиента. Я нашел MediaElement.js Джона Дайера отличным решением для этого. Если вы предоставите версию видео в формате h.264 и WebM, оно будет воспроизводиться практически во всех браузерах. Для неподдерживаемых браузеров будет использоваться Flash.

Все видео клиента были в формате wmv, поэтому их нужно было преобразовать в форматы h.264 и WebM. К счастью, Джон также дал несколько указаний по кодированию в эти форматы с помощью FFmpeg:

http://johndyer.name/ffmpeg-settings-for-html5-codecs-h264mp4-theoraogg-vp8webm/

К сожалению, FFmpeg изменился с тех пор, как были опубликованы команды, поэтому потребовались небольшие модификации. Я также внес некоторые изменения, чтобы сохранить соотношение сторон видео и кодировать видео с более низким битрейтом и более высокой скоростью. Кроме того, некоторые из конвертируемых видео были очень короткими и заканчивались до 10-секундной отметки, на которой создается миниатюра. Чтобы решить эту проблему, я изменил сценарий, чтобы попытаться захватить миниатюру на отметке 1, 2, 3, 5 и 10 секунд, при этом каждый успешный захват перезаписывал последний.

Вот обновленный пакетный файл, который я использовал:

REM mp4 (H.264 / AAC)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvo_aacenc -b:a 128k %1.mp4

REM webm (VP8 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvorbis -f webm %1.webm

REM jpeg (screenshot at 10 seconds, but just in case of a short video - take a screenshot earlier and overwrite)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 1 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 2 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 3 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 5 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 10 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg

Я также создал отдельный пакетный файл, который будет перебирать все wmv в заданном каталоге и запускать пакетный кодировщик для каждого файла:

for /r %1 %%i in (*.wmv) do "c:\program files\ffmpeg\CreateWebVideos.bat" %

Фарон Кодер говорит: 3 сентября 2014 г., 18:52 (*nix)

Привет -

Для тех, кто использует ffmpeg на основе unix — вот соответствующие авторские коды (выше) в названии unix.

ffmpeg -y -i $fileid -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf “scale=trunc(oh*a/2)*2:480″ -threads 0 -acodec libvo_aacenc -b:a 128k “$file.mp4″ < /dev/null

ffmpeg -y -i $fileid -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf "scale=trunc(oh*a/2)*2:480" -threads 0 -acodec libvorbis -f webm "$file.webm" < /dev/null

ffmpeg -y -i $fileid -ss 1 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 2 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 3 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 5 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null
ffmpeg -y -i $fileid -ss 10 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null 

Надеюсь, это поможет.

person Community    schedule 14.09.2014

Вот простое решение, которое сработало для меня. Моя проблема заключалась в воспроизведении видеофайлов MP4 в Chrome 29. Я нашел это решение после того, как просмотрел кучу похожих тем в Интернете и попробовал кучу вещей с расширениями и т. Д. Вот что сработало:

Введите chrome:flags в адресную строку Chrome на этой странице, найдите «аппаратное обеспечение».

Включите «аппаратное ускорение декодирования видео». Затем перезапустите его

Это позволит вам воспроизводить mp4 на хроме и транслировать на хромкаст, если вы пытаетесь это сделать.

person Camilo    schedule 23.09.2013