Тег HTML5 video, уже поддерживается всеми основными браузерами.
Как видно из таблицы, текущие версии Firefox, Chrome и Opera поддерживают продвигаемый Google открытый WebM, а Safari (включая IOS версию) и IE проприетарный H.264, для остальных же браузеров можно использовать flash плеер, который умеет проигрывать тот же H.264, и таким образом для кроссбраузерности будет достаточно перекодировать видео в эти 2 формата.
В этой небольшой заметке я расскажу как перекодировать видео в эти самые форматы (этот вопрос освещён в интернете на удивление плохо) в VLC плеере и как использовать jPlayer для его кроссбраузерного воспроизведения.
Скачиваем и устанавливаем VLC (доступен для большинства ОС).
Открываем и жмём Медиа -> Конвертировать / сохранить…, куда добавляем файлы для конвертирования, после чего жмём на кнопку Конвертировать / сохранить и получаем следующий диалог:
Сначала выбираем профиль Video — VP80 + Vorbis (Webm), если нажать на иконку с инструментами, можно задать ширину потока для видео и звука и изменить другие настройки.
После этого можно через обзор выбрать название файла и выходную папку, например test.webm и смело жать кнопку — Начать, так-же можно нажать на галочку Отображать вывод, чтобы наблюдать за процессом.
На выходе получим необходимый файл.
Теперь ту-же самую операцию повторить для H.264 (расширение mp4).
Для размещения видео, будем использовать jQuery plugin — jPlayer, лучше скачать архив с примерами (на данный момент актуально — www.jplayer.org/latest/jQuery.jPlayer.2.0.0.demos.zip).
Распаковываем архив, и создадим в его корне страницу test.html с примерно следующим содержимым (вся суть в тегах script): pastebin.com/tmVGyXd2
Так-же копируем в эту папку полученные test.webm и test.mp4 (если хотите чтобы была ещё и картинка превью видео — test.jpg).
Теперь можно закачать всё на веб-сервер (в примере папка называется /jplayer/) и попробовать результат в разных браузерах.
Обязательно пропишите типы содержимого для веб-сервера (например в .htaccess для Apache):
www.mirovideoconverter.com — очень простой и удобный конвертер (правда пожалуй даже слишком простой), основан на ffmpeg.
www.xmedia-recode.de — бесплатный проприентарный для Win, много настроек, очень неплох.
ffmpeg.org (билды для Win hawkeye.arrozcru.org) — я думаю представлять не надо, пример использования:
P.S. Если есть какие-то более удобные способы конвертации — пишите, т.к. этот не лишён недостатков.
Как видно из таблицы, текущие версии Firefox, Chrome и Opera поддерживают продвигаемый Google открытый WebM, а Safari (включая IOS версию) и IE проприетарный H.264, для остальных же браузеров можно использовать flash плеер, который умеет проигрывать тот же H.264, и таким образом для кроссбраузерности будет достаточно перекодировать видео в эти 2 формата.В этой небольшой заметке я расскажу как перекодировать видео в эти самые форматы (этот вопрос освещён в интернете на удивление плохо) в VLC плеере и как использовать jPlayer для его кроссбраузерного воспроизведения.
Готовим видео
Скачиваем и устанавливаем VLC (доступен для большинства ОС).Открываем и жмём Медиа -> Конвертировать / сохранить…, куда добавляем файлы для конвертирования, после чего жмём на кнопку Конвертировать / сохранить и получаем следующий диалог:
Сначала выбираем профиль Video — VP80 + Vorbis (Webm), если нажать на иконку с инструментами, можно задать ширину потока для видео и звука и изменить другие настройки.
После этого можно через обзор выбрать название файла и выходную папку, например test.webm и смело жать кнопку — Начать, так-же можно нажать на галочку Отображать вывод, чтобы наблюдать за процессом.
На выходе получим необходимый файл.
Теперь ту-же самую операцию повторить для H.264 (расширение mp4).
Размещаем видео на странице
Для размещения видео, будем использовать jQuery plugin — jPlayer, лучше скачать архив с примерами (на данный момент актуально — www.jplayer.org/latest/jQuery.jPlayer.2.0.0.demos.zip).Распаковываем архив, и создадим в его корне страницу test.html с примерно следующим содержимым (вся суть в тегах script): pastebin.com/tmVGyXd2
Так-же копируем в эту папку полученные test.webm и test.mp4 (если хотите чтобы была ещё и картинка превью видео — test.jpg).
Теперь можно закачать всё на веб-сервер (в примере папка называется /jplayer/) и попробовать результат в разных браузерах.
Обязательно пропишите типы содержимого для веб-сервера (например в .htaccess для Apache):
AddType video/mp4 .mp4
AddType video/webm .webm
UPD: ещё инструменты для перекодирования видео
www.mirovideoconverter.com — очень простой и удобный конвертер (правда пожалуй даже слишком простой), основан на ffmpeg.
www.xmedia-recode.de — бесплатный проприентарный для Win, много настроек, очень неплох.
ffmpeg.org (билды для Win hawkeye.arrozcru.org) — я думаю представлять не надо, пример использования:
ffmpeg -i input.avi -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k test.webm
ffmpeg -i input.avi -acodec aac -strict experimental -ac 2 -ab 96k -vcodec libx264 -vpre slow -b 345k -f mp4 test.mp4P.S. Если есть какие-то более удобные способы конвертации — пишите, т.к. этот не лишён недостатков.