Как настроить видеокодек в браузере

Обновлено: 07.07.2024

Очень часто пользователи сталкиваются с проблемой, когда на компьютере не воспроизводится видео. Могут воспроизводиться только определенные форматы или вовсе никакое видео не воспроизводится. Все дело в отсутствии кодеков. В данной статье я расскажу, почему не показывает видео и как решить данную проблему с помощью кодеков для Windows.

Что такое кодеки?

С английского языка слово « кодек » переводится как « кодировщик/декодировщик ». Кодек используется для кодирования аудио и видео файлов, а при воспроизведении файлы декодируются этим же кодеком.

Кодеки устанавливаются на компьютеры как обычные программы. У них есть установочный файл, который выполняет автоматическую установку и интегрирование кодеков в систему. При воспроизведении файлов операционная система сама подбирает нужный кодек для расшифровки. Пользователю ничего не нужно делать самостоятельно. Думаю, теперь вы сами сможете ответить на вопрос, почему не показывает видео.

Какие кодеки выбрать?

В интернете можно найти множество различных программ с кодеками. Я пытался работать с различными установщиками, но всегда возвращался к одному сборнику кодеков.

Называется этот сборник K-Lite Codec Pack. Это наиболее оптимальный вариант для обычных пользователей, да и для профессионалов в аудио и видео обработке данный сборник будет очень полезен. В нем нет ничего лишнего, а установка очень проста.

У меня были ситуации, когда после установки кодеков половина форматов воспроизводилась, а другая половина ни в какую не хотела. Но с K-Lite Codec Pack такого ни разу не было. Кодеки здесь подобраны очень грамотно и всегда есть все необходимое для удовлетворения нужд рядового пользователя.

В K-Lite Codec Pack есть собственный плеер – « Media Player Classic ». Он привлекает своей простотой и огромным количеством настроек. Попробуйте и вы уже никогда не сможете работать в каком-то другом.

Как скачать K-Lite Codec Pack?

Теперь перейдем к практической части нашей статьи. Я расскажу, где и как скачать K-Lite Codec Pack. Файлы установки подходят как для 32-х битных систем, так и для 64-х битных. Придерживайтесь данного алгоритма:

Свершилось то, чего многие ожидали — крупнейшие видеосервисы (YouTube, Vimeo) предоставили в режиме бета-тестирования возможность воспроизводить ролики средствами HTML5. Казалось бы, всё прекрасно, и Flash-у пора уйти на заслуженный покой. Ан нет — оказалось всё не так гладко.

А разгадка одна — кодеки. Разработчики браузеров и поставщики контента не сошлись во мнении, какой кодек для видео использовать. На самом деле, эта проблема обсуждалась и ранее, и консенсуса по ней так и нет. В итоге из черновой спецификации HTML5 были удалены упоминания о конкретном кодеке.

Кодеки

На звание кодека для HTML5 video в данный момент претендуют два кодека — Ogg Theora и H.264.

Ogg Theora

Использовать Ogg Theora можно везде, всегда, без лицензионных или патентных отчислений.

H.264 — это лицензируемый стандарт сжатия видео. Его использование требует платы в странах, где действует патенты на него (в первую очередь, это США). Однако, на сегодняшний день, это один из самых лучших способов сжимать видео. Именно H.264 является стандартом де-факто сжатия HD-видео, к примеру. H.264 заметно эффективнее Ogg Theora по соотношению качество/битрейт.

Если кратко, H.264 — лучше, но даже его open-source реализации не могут быть использованы свободно в странах, где действуют патенты на него.

Реализации в современных браузерах

Здесь я упоминаю только те браузеры, в которых HTML5 video работает уже сейчас.

Mozilla Firefox

Реализация использует библиотеку liboggplay, а это означает, что могут использоваться только Ogg Theora для видео и Ogg Vorbis для аудио. Т.е. кодек фиксирован, и чтобы сделать поддержку чего-то ещё, нужно по сути переписать реализацию.

Google Chrome

Реализация использует статически привязанный ffmpeg. ffmpeg поддерживает кучу разных кодеков, включая и Ogg Theora, и H.264, и вообще практически всё, что сейчас реально используется.

К слову, ffmpeg в данный момент используется почти повсеместно — например, в CCCP и K-Lite Codec Pack, а также в mplayer и VLC используется именно ffmpeg.

Казалось бы, всё замечательно. Но! ffmpeg, хоть и open source, не может быть свободным в США. Для распространения программы, использующей ffmpeg, нужно платить отчисления. Google себе это может позволить, и имеет право выпускать билды со встроенным ffmpeg. Но совсем не такая ситуация с дистрибутивами Linux. Те из них, что выпускаются в США, не смогут включить в свои репозитории Chrome с поддержкой ffmpeg, так как это потребует платы отчислений. В первую очередь это касается такого небезызвестного дистрибутива, как Fedora.

Safari

Использует фреймворк QuickTime, что позволяет воспроизводить что угодно, если установлен соответствующий QuickTime-кодек.

Наверное, из современных реализаций эта наиболее правильная, т.к. имеет модульную архитектуру изначально. Но это всё сильно завязано на Mac OS, поэтому к остальным системам и браузерам неприменимо.

Суровая реальность

Теперь поговорим о поставщиках контента. Свобода~~, равенство, братство~~ — это всё хорошо в теории, но на практике вопрос решается небольшими зеленоватыми бумажками с портретами американских президентов. Google-у как-то проще заплатить за лицензию на более эффективный кодек, чем платить больше за трафик, и место на серверах. Мало того, учитывая то, что у них и так всё видео хранится в H.264, было бы особенно глупо (с точки зрения бизнеса, естественно), перекодировать это всё в Ogg Theora. Так что решение использовать H.264 — это абсолютная, экономически оправданная, жизненная необходимость. YouTube не станет использовать Ogg Theora. Не выгодно. Точка.

А мало того, использование H.264 выгоднее и нам, конечным пользователям. Мы же не платим лицензионные отчисления, а, тем не менее, получаем лучшее качество видео при меньшем количестве загруженных данных (привет жителям не-столиц с хилыми каналами в интернеты).

Всё плохо?

Сейчас — да. Но! Есть выход. Для декодирования видео в браузере нужно использовать модульный подход, не привязываясь к определённому кодеку. Мало того, в каждой операционной системе уже и так есть модульная инфраструктура кодеков. В Windows — это DirectShow, в Mac OS X — это QuickTime, в Linux — это gstreamer. А gstreamer ещё и кроссплатформенный, между прочим, и уже используется в кроссплатформенных программах, к примеру, Songbird для воспроизведения музыки использует именно gstreamer на всех платформах.

Использование gstreamer решит все проблемы с кодеками в браузерах один раз и навсегда. В частности, не будет никаких проблем с патентами, так как браузер будет распространятся без защищённых патентами кодеков, но на системе пользователя он сможет найти установленный плагин для этого кодека, и использовать его.

А мало того, в gstreamer предусмотрена возможность использовать кодеки, установленные в родном для данной системы фреймворке (для Windows — DirectShow, для Mac OS — QuickTime).

Светлое будущее, наступит ли оно?

Mozilla Firefox

Собственно, вот. Но, судя по комментариям там, сейчас такая интеграция планируется только для Fennec. Честно говоря, я искренее недоумеваю по этому поводу. Поддержка H.264 для Firefox нужна, и быстро, иначе есть большой риск остаться за бортом.

Google Chrome

Беда. Я пытался вникнуть в причину отказа, но она мне показалось не слишком веской. В принципе, тут нечего добавить. Можно почитать обсуждение, оно довольно жаркое. Ещё можно проголосовать за этот баг (отметить звёздочкой). Мало ли…

Opera

Внезапно, маленькая, но очень упорная, норвежская компания показывает себя с очень хорошей стороны. Читаем, радуемся.

Другие браузеры

Неповоротливые гиганты легко могут оказаться позади маленьких, почти не используемых в широких массах браузеров, таких как Epiphany, Midori, Aurora. Все они используют WebKit. Epiphany и Midori используют GtkWebKit, в нём планируется (или уже сделана) поддержка HTML5 video через gstreamer. Aurora использует QtWebKit, в нём для HTML5 планируется (или уже частично сделано) использование Phonon, который, с свою очередь, может использовать разные бэкэнды, в том числе и gstreamer.

Однако, на текущий момент, ни в одном из них работающей поддержки HTML5 нет. Остаётся верить в их скорое светлое будущее, ведь оно вполне реально.

Яндекс.Браузер умеет открывать видеофайлы с расширениями mp4 , swf , avi , webm , mpg , ogv , x-m4v , wmv , m4v .

Видеофайлы с расширениями mov , quicktime и flv не поддерживаются.

Просмотр видео в отдельном окне

Примечание. Видео появляется в отдельном окне, если вы запустили видео сами или оно играет со звуком. В режиме Инкогнито видео нельзя вынести в отдельное окно.

Вы можете просматривать видео в отдельном окне браузера. Например, можно одновременно запустить программу и видеоинструкцию к ней. Окно с видеоплеером отображается поверх всех остальных окон, в какой бы программе вы ни работали. Окно можно перетащить в любое место экрана или изменить размеры окна. Если свернуть браузер, видео продолжит проигрываться. Если видео в формате HTML5 содержит субтитры (например, на YouTube у таких видео есть значок  на панели управления), они тоже появятся в новом окне.

По умолчанию видео открывается в отдельном окне, когда вы переключаетесь на другую вкладку или программу. Если этого не случилось, наведите указатель мыши на верхнюю часть видеоплеера и нажмите значок .

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

Для быстрого управления используйте горячие клавиши.

Поставить на паузу / снять с паузы	Space
Перемотать на 5 секунд вперед	→
Перемотать на 5 секунд назад	←

Поставить на паузу / снять с паузы	Space
Перемотать на 5 секунд вперед	→
Перемотать на 5 секунд назад	←

Вы также можете замедлить или ускорить видео. Для этого нажмите   → Скорость и выберите из списка нужное значение.

Вы можете скрыть кнопку выноса видео или автоматическое воспроизведение видео в другом окне:

В блоке Просмотр видео поверх других вкладок и программ отключите опцию Показывать на видеороликах кнопку для выноса видео или Автоматически открывать видео в отдельном окне .

Если вы хотите запретить вынос видео в отдельное окно, отключите обе опции.

Примечание. После окончания видео в вынесенном окне появляется лента рекомендованных видеозаписей. Вы можете запретить ее показ. Для этого в Настройках в блоке Просмотр видео поверх других вкладок и программ отключите опцию Показывать рекомендации в окне выноса видео .

Перевод и озвучка видео

Смотрите видео на русском языке с помощью функции закадрового перевода.

Прекращение поддержки Flash

Технология Flash использовалась в браузерах для воспроизведения мультимедийных файлов и запуска игр. Ее поддержку и распространение Adobe прекратила с 2021 года.

Большинство сайтов уже используют другие форматы воспроизведения контента — например, HTML5 или WebGL. Эти находящиеся в открытом доступе технологии работают быстрее и стабильнее, тратят меньше энергии, и они значительно безопаснее Flash.

Если вы посещаете сайт, использующий Flash, обратитесь в службу поддержки этого ресурса.

Проблемы с видео

Видео не воспроизводится, а загружается на компьютер

Если владелец сайта запретил открывать файл в Яндекс.Браузере, файл загружается на компьютер пользователя. Чтобы открыть его в браузере, перетащите в окно браузера значок загруженного файла, появившийся справа от Умной строки, или нажмите клавиши  Ctrl + O и выберите нужный файл в папке Загрузки.

Проблемы при воспроизведении видео

Если в браузере вместо видео отображается черный экран, дрожит изображение в онлайн-играх, видео долго загружается, постоянно тормозит или останавливается\nпри переходе в полноэкранный режим, попробуйте решить проблему одним из способов.

Откройте   → Дополнения и отключите все расширения. Если проблема исчезла, методом перебора найдите расширение, которое ее вызвало. Отключите расширение. Вы можете также написать его разработчикам о проблеме. Очистите кеш, чтобы в браузер не подгружалась ранее сохраненная некорректная копия страницы.

Попробуйте включить или отключить аппаратное ускорение :

Если в блоке Производительность включена опция Использовать аппаратное ускорение, если возможно — отключите ее. Если эта опция отключена, включите ее. Закройте браузер, нажав клавиши Ctrl  +  Shift  +  Q . Снова запустите браузер, чтобы изменения вступили в силу.

Проверьте, решена ли проблема.

Нажмите Пуск  → Панель управления  → Диспетчер устройств . Правой кнопкой мыши нажмите название вашей видеокарты. В контекстном меню выберите пункт Обновить драйверы .

Проверьте, решена ли проблема.

Если проблема осталась, напишите в службу поддержки через форму обратной связи. В письме укажите, что драйверы обновлены.

Не воспроизводится защищенный контент

Примечание. В режиме Инкогнито защищенный контент не воспроизводится.

Устаревший браузер может не поддерживать технологии для быстрой загрузки видео. Установите последнюю версию браузера .

Прокрутите страницу вниз и нажмите Расширенные настройки сайтов . В блоке Защищенное содержимое включите опцию Разрешить воспроизведение защищенного содержимого . Некоторые сервисы для защиты контента используют уникальные идентификаторы устройств. Чтобы они работали, в блоке Идентификаторы защищенного контента включите опцию (только для Windows)  Разрешить сайтам использовать идентификаторы для воспроизведения защищенного контента .

Браузер не поддерживает NPAPI и Unity

Яндекс.Браузер больше не поддерживает модуль NPAPI, на основе которого сделан Unity Web Player. Эта технология устарела, компания Unity также перестала поддерживать этот модуль.

Не могу отключить автозапуск видео при переходе на сайт

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

Браузер не видит веб-камеру

Проверьте, распознаётся ли камера другими программами.

Если да, укажите ее вручную в настройках Браузера:

В блоке Доступ к камере выберите вашу камеру и включите опцию Запрашивать разрешение

Если это не помогло, напишите в службу поддержки Браузера.

">,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Проигрывание видео в браузере. Справка","canonical":"https://browser.yandex.ru/help/working-with-files/video.html","productName":"Яндекс.Браузер","extra_js":[[],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>]],"extra_css":[[],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"documentPath":"/help/working-with-files/video.html","isBreadcrumbsEnabled":true,"lang":"ru","params":<>>>>'>Видео каких форматов можно проигрывать в браузере?

Яндекс.Браузер умеет открывать видеофайлы с расширениями mp4 , swf , avi , webm , mpg , ogv , x-m4v , wmv , m4v .

Видеофайлы с расширениями mov , quicktime и flv не поддерживаются.

Просмотр видео в отдельном окне

Вы можете просматривать видео в отдельном окне браузера. Например, можно одновременно запустить программу и видеоинструкцию к ней. Окно с видеоплеером отображается поверх всех остальных окон, в какой бы программе вы ни работали. Окно можно перетащить в любое место экрана или изменить размеры окна. Если свернуть браузер, видео продолжит проигрываться. Если видео в формате HTML5 содержит субтитры (например, на YouTube у таких видео есть значок на панели управления), они тоже появятся в новом окне.

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

Сразу обратим внимание на тэг < source >, который позволяет включать видео разных форматов, что важно в тех случаях когда один из них не поддерживается тем или иным браузером.

Само собой есть и более простой вариант вставки видео:

Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.

Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
- url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)

И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source, для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.

Форматы видео

mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis

На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:

< video >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
Video tag not supported. Download the video < a href ="movie.webm" > here </ a > .
< video > >

Одно «НО» — если вы рассчитываете, что ваш сайт будет использоваться под айпадом, укажите видео в формате .mp4 первым, данная особенность связана с багом на самом айпаде.

И раз уж зашла речь про .mp4 следует отметить ряд пунктов. Во-первых, видеокодек h.264 не является бесплатным, так что за лицензию надо платить. Почитать об этом можно вот тут. Во-вторых, надо быть абсолютно точно уверенным в указанных видео и аудиокодеках, они могут отличаться от видео к видео. Наиболее распространенным можно считать «avc1.42E01E, mp4a.40.2», так что на всякий случай сверяемся тут.

Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.

Chrome Frame

Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. (Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин.)

Ну и никто не отменял флеш — опознаем браузер, видим ие, грузим флэш. Тем более что Adobe добавило в список проигрываемых видеоформатов формат .webm. Так что даже не придется что то думать с перекодировкой.

Шифруемся, или надо перекодировать видео

В случае если есть необходимость переконвертировать видео, то хорошей программой является Miro Converter, имеющая версии под винду и мак. В программе не так много возможностей поиграть с параметрами, но зато она позволяет конвертировать в три основных формата. А если посмотреть на нее более пристально, то можно увидеть, что это оболочка для ffmpeg и ffmpeg2theora, которые работают во всех ОС из под командной строки. Подробно об этой программе можно прочитать вот здесь.

Плюшки

Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. (К сожалению опять без наглядных примеров, так что идем на сайт оригинала)

Video + HTML

Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay. В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру — «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload, который позволяет подгружать видео фоном. В итоге получаем нечто подобное:

< video poster ="star.jpg" autoplay loop controls tabindex ="0" >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
</ video >

< video poster ="star.jpg" autoplay ="autoplay" loop ="loop" controls ="controls" tabindex ="0" >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
</ video >

Video + JS

Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте W3.

Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:

video.addEventListener( 'canplay' , function (e) this .volume = 0.4;
this .currentTime = 10;
this .play();
>, false

В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.

Video + CSS

Тут практически без комментариев — видео как элемент веб-страницы воспринимает всевозможные css штуки — начиная от border, opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.

Video + canvas

HTML5 принес в этом мир еще одну мощную вещь — canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно — ничего.

Пример совместного использования canvas и video может быть следующим — получение скриншотов из проигрываемого видео. У canvas есть метод drawImage, позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video! А с помощью другого метода — toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:

video_dom.addEventListener( 'play' , function () video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height = video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext( '2d' );
draw_interval = setInterval( function () // import the image from the video
ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
// export the image from the canvas
var img = new Image();
img.src = canvas_draw.toDataURL( 'image/png' );
img.width = 40;
frames.appendChild(img);
>, 1500)
>, false );

Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь — WebGL.

Video + SVG

SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects. С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:

Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css.

Заключение

Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете (и на хабре — прим. пер.) выложена уже масса примеров (1, 2, 3, 4, 5, 6)

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

Читайте также: