08. Какой формат видео мне выбрать в HTML5?

Из-за отсутствия связи между производителями браузеров не существует единого универсального формата для сохранения видеофайлов для встраивания в технологию HTML5. Спецификация HTML5 не определяет конкретный формат видеофайлов, которые должны быть помещены в тег VIDEO. Свободно, каждый браузер реализовал поддержку видеокодеков в соответствии со своим собственным смыслом / убеждениями / преимуществами. В следующей части статьи мы поможем вам подготовить видеофайл, чтобы каждый мог его просмотреть. Мы представим необходимые инструменты и HTML-код, который будет включать отсталых пользователей, использующих старый браузер, который не поддерживает технологию HTML5.

Вначале мы представим проблему обработки различных форматов видео различными браузерами.

* - вскоре услуга будет удалена, как заявлено производителем.
** - только когда пользователь Windows устанавливает его на компьютер (по умолчанию система не предоставляет его).

Чтобы понять сокращения в левой части таблицы, нам нужно изучить основы видеофайлов. Как правило, когда мы просим кого-то описать такой файл, мы можем услышать, например, «это файл AVI». По сути, AVI или любое другое расширение видеоклипов - это просто информация о том, как записывать данные. Как и ZIP-слово, оно не предоставляет информацию о том, что в нем, но указывает, как эти данные хранятся. Таким образом, в дополнение к контейнеру данных (здесь: упомянутый AVI) мы должны знать, какие файлы находятся в контейнере. Фильмы содержат - как вы можете легко догадаться - изображение и саундтрек. И только информация о том, для какого алгоритма были закодированы оба пути, все еще необходима. Таких кодеков много. Нас должны интересовать только 3 кодека изображений: H.264, Theora и VP8 и 2 аудиокодека: AAC и Vorbis. Таким образом, у нас уже есть полный набор информации, чтобы мы могли узнать, может ли определенный файл воспроизводиться в определенном браузере или нет.

Ниже приведены пояснения к аббревиатурам, которые появляются в таблице, описывающей поддержку видеоформатов различными веб-браузерами:

  • WebM - файлы с расширением * .webm, кодек изображения VP8, кодек Vorbis
  • OGG - файлы с расширением * .ogv, изображение кодека Теория, кодек Vorbis
  • MP4 - файлы с расширением * .mp4, кодек изображения H.264, аудиокодек AAC

Еще раз посмотрев на таблицу и объяснив аббревиатуры, можно легко увидеть отсутствие одного оптимального формата записи фильма. Принятие решения по любому из них, и поэтому мы подвергаем некоторую аудиторию невозможности воспроизвести фильм. Это не проблема, когда мы хотим поделиться праздничным видео на нашем частном сайте. Хуже того, если сайт должен быть доступен всем, без исключения, с полным контентом, включая фильм. Затем нам нужно подумать о подготовке фильма как минимум в двух форматах: MP4 (IE9, Chrome) и OGG (Opera, Firefox). Мы покажем вам, как сделать это шаг за шагом! Это действительно кусок пирога.

Во-первых, у нас должен быть фильм (ик). В принципе, это может быть любой фильм, даже снятый с помощью мобильного телефона или фотоаппарата. Мы будем использовать трейлер Toy Story 3, чтобы показать вам интересную функцию, которую многие из вас упустят при просмотре YouTube. Мы рекомендуем вам посетить сайт Вождение пробной версии IE выберите фильм «История игрушек» и щелкните правой кнопкой мыши в области фильма. Затем выберите «Сохранить видео как ...» из контекстного меню.

» из контекстного меню

@ @ HOME

У нас уже есть видео файл. Теперь нам нужно преобразовать его в два формата, чтобы каждый посетитель мог воспроизвести его в своем браузере. Самое простое решение - использовать программу Miro Video Converter , Мы скачиваем, устанавливаем и запускаем. Сам процесс преобразования просто перетаскивает файл в окно программы и выбирает формат. Theora является первой в списке - она ​​соответствует нашему обозначению OGG согласно таблице соответствия. WebM - это WebM , а MPEG4 из таблицы - это позиция iPhone в программе Miro VideoConverter . Выбираем Theor и запускаем конвертацию (кнопка Convert ). Мы предупреждаем, что относительно небольшие файлы с небольшими размерами могут конвертировать в течение длительного времени! Как только процесс будет успешным, мы меняем формат на iPhone и снова конвертируем, вооружившись терпением. В результате у нас есть два файла.

Теперь стоит открыть эти файлы и проверить, не привела ли конверсия к значительной потере качества. Если окажется, что мы не удовлетворены конечным результатом или размером файла, мы можем использовать расширенные инструменты, которые позволят вам настроить многие параметры, которые вообще не доступны в обычном Miro Video Converter . Мы представим образец возможностей программы Ручной тормоз и мы укажем функции, которые следует учитывать при подготовке файла для доступа в Интернет. Давайте начнем с самого начала.

Мы загружаем Handbrake , устанавливаем и запускаем его. Мы указываем файл, который будет служить исходным файлом (кнопка « Источник» ). Мы можем игнорировать уведомление о том, что по умолчанию нет места для хранения. Выберите iPhone и iPod Touch справа. Мы ищем оптимизированный веб- вариант в центре экрана и выскакиваем. Это очень полезная функция, которая изменит организацию данных, чтобы вы могли видеть начало фильма, а остальные будут выделены в фоновом режиме. Это никак не сказывается на качестве пленки.

Мы можем отрегулировать размер фильма в соответствии с вашими предпочтениями на вкладке « Изображение ». Стоит помнить, чтобы сохранить соотношение ширины к высоте. В противном случае символы в полученном фильме, например, будут растянуты.

Видеокодек можно выбрать на вкладке « Видео ». Мы рекомендуем вариант двойного кодирования: 2-Pass Encoding. Это значительно улучшает качество фильма после конвертации, поскольку весь процесс делится на два этапа. Первый - это анализ, а второй - это преобразование с учетом определенных шаблонов, обнаруженных при анализе содержимого файла. В любом случае, время, необходимое для конвертации файла, удваивается, но мы выигрываем в качестве.

В любом случае, время, необходимое для конвертации файла, удваивается, но мы выигрываем в качестве

@ PAGE @ Кстати, нельзя забывать об основной опции контроля качества выходного файла. Он находится на той же вкладке справа. Здесь мы можем установить определенный размер файла, который в конечном итоге будет иметь конвертированный фильм ( Target Size ). Программа автоматически выберет качество. Мы также можем указать средний битрейт ( Avg Bitrate ) или указать процент, переместив ползунок ниже. Пользуясь случаем, стоит отметить, что двукратное увеличение стоимости не улучшит качество, которое мы могли бы оценить как «вдвое больше». Лучше всего поэкспериментировать и выбрать оптимальные параметры для своих нужд.

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

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

<video width = "400" высота = "300" элементы управления>
<source src = "film.mp4 type = 'video / mp4; codecs =" avc1.42E01E, mp4a.40.2 "'>
<source src = "film.webm type = 'video / webm; codecs =" vp8, vorbis "'>
<source src = "film.ogv type = 'video / ogg; codecs =" theora, vorbis "'>
Ваш браузер не поддерживает <VIDEO> в HTML5!
</ Видео>

Атрибут type элемента <source> не так страшен, как кажется. Он должен содержать набор из 3 фрагментов информации, необходимых для проверки того, поддерживает ли браузер воспроизведение фильма. Напомним, что они являются контейнером данных и видео- и аудиокодеком.

В заключение обратите внимание, что замена сообщения об отсутствии поддержки тега <video> может быть легко заменена другим кодом. Это дает прекрасную возможность создателям сайтов, которые не хотят оставлять старые версии браузеров на льду. Все, что им нужно сделать, это поместить код для встраивания объекта ( тег <object> ) и разместить другой проигрыватель, например, FlashPlayer на основе Flash . Пример кода будет:

<object width = "400" height = "300" type = "application / x-shockwave-flash"
данные = "Flowplayer-3.2.1.swf">
<param name = "movie" value = "flowplayer-3.2.1.swf" />
<param name = "allowfullscreen" value = "true" />
<param name = "flashvars" value = 'config = {"clip": {"url": "http://www.centrumxp.pl/film.mp4", "autoPlay": false, "autoBuffering": true} } '/>

Принцип прост. Мы пытаемся навязать использование технологии HTML5, и если мы не можем этого сделать, мы используем Flash, что происходит согласно статистике на 99% компьютеров. Так что цель достигнута!

Похожие

Скачать и сохранить видео с YouTube
... видео Откройте видео на YouTube, щелкните по нему правой кнопкой мыши и скопируйте URL в буфер обмена. Вставить URL Перейдите в YouTube Downloader и нажмите кнопку «Копировать URL» на панели инструментов. Видеоклип будет добавлен в список, а приложение будет собирать
Взгляд в правильную семантику HTML5
Если вы тщательно спланируете структуру ваших HTML-документов, вы можете помочь компьютерам понять смысл вашего контента . Правильный синтаксис важен наверняка, но он в основном просто обеспечивает парсеры, поисковые системы и вспомогательные технологии бессмысленным набором данных. Если вы улучшите ваш рабочий процесс, обращая внимание на семантику, вы сможете создать более качественный контент, который привлечет больше посетителей. Семантика - это изучение значения
Свадебная фотокнига. Как сэкономить?
Что такое свадьба? Это самый счастливый момент жизни! Так ответит практически каждый, кто уже в клубе браке или только туда собирается. Но помимо прочего, свадьба - это марафон вызов, где нужно все предусмотреть. И здесь возникает ряд вопросов: Как правильно подобрать тему такого торжественного мероприятия? Какое платье выбрать? Как будет выглядеть свадебная фотокнига?
Как мне создать заявку на онлайн поддержку?
Вот как можно отправить заявку на гарантийный ремонт онлайн-поддержки для ПК Dell. Отслеживайте активность запросов поддержки и связывайтесь с Dell на странице истории поддержки. обследование Оформить онлайн-запрос поддержки по гарантийному требованию для вашего компьютера Dell теперь проще с помощью онлайн-запроса поддержки. Сделайте запрос поддержки на веб-сайте, и менеджер по работе с клиентами Dell позаботится об этом в течение одного рабочего дня. Вы также можете сэкономить
Как зациклить видео YouTube и плейлисты на Chromecast
Google принадлежит YouTube, что означает, что YouTube имеет лучшую поддержку Chromecast, какую вы только можете себе представить. Никакой другой сервис потокового видео или его приложение не подходит. Тем не менее, Google имеет странные ограничения для трансляции видео с YouTube в Chromecast. Вы можете разыграть одно видео или весь плейлист. Вы даже можете создать очередь видео для трансляции в Chromecast. То, что вы не можете сделать, это зациклить Youtube видео и плейлисты на Chromecast.
Какой SSD диск купить? Тест 100 SSD и рекомендуемых SSD дисков 2014
... все большую популярность среди постоянных пользователей, не только энтузиастов с богатым портфелем, потому что постоянное падение цен сделало такие носители доступными почти для всех"> SSD-накопители приобретают все большую популярность среди постоянных пользователей, не только энтузиастов с богатым портфелем, потому что постоянное падение цен сделало такие носители доступными почти для всех. Сегодня достойные модели емкостью 120–128 ГБ стоят 250–280 злотых, что позволяет монтировать SSD
Как выбрать пол для маленькой квартиры?
Небольшая территория может быть проблемой - часто нам приходится внедрять нестандартные идеи и решения для квартиры, что позволяет максимально эффективно использовать пространство. А как насчет пола? Как вы заканчиваете нашу розетку, чтобы мы чувствовали себя комфортно и комфортно в ней? Ниже, в сотрудничестве с брендом SWISS KRONO, мы представляем способы отделки небольшой квартиры. Вопреки внешнему виду, с помощью
В Киевской области (да и в целом по Украине) доступны следующие варианты беспроводного Интернета: Спутниковый Ин...
В Киевской области (да и в целом по Украине) доступны следующие варианты беспроводного Интернета: Спутниковый Интернет доступен практически по всей Украине. Главное его преимущество - независимость от украинского "земной" инфраструктуры - сигнал подается прямо "из космоса" :).
Стандарт описания продукта, рекомендуемый Google - GS1 Polska.
Польский рынок электронной коммерции является одним из самых динамично развивающихся в Европейском Союзе. В случае транзакций на границе между интернет-магазином и потребителем его стоимость в 2016 году должна превысить 36 миллиардов злотых, а в 2020 году она уже составит
Простой способ конвертировать видео файлы на YouTube
... HTML5. В этой статье мы сосредоточимся на конвертации видеоклипов. Наша задача - уменьшить вес входного файла и не значительно ухудшить качество фильма. Мы хотим отправить подготовленный файл в наш аккаунт YouTube. МЫ СОЗДАЕМ ПРОФИЛЬ
10 лучших разработчиков сайтов 2019 года
... веб-мастеров на рынке дает вам целый ряд возможностей"> Наш список лучших веб-мастеров на рынке дает вам целый ряд возможностей. Есть все виды плюсов, минусов, цен и возможностей для размышлений. Вы знаете, какие строители попали в топ-10, но как вы выбираете лучших из лучших? В целом, мы определенно рекомендуем Wix , У него есть что-то для всех: это лучший универсальный конструктор сайтов, предлагающий

Комментарии

Какой SSD диск самый лучший и самый выгодный?
Какой SSD диск самый лучший и самый выгодный? Автор: Себастьян Октаба Когда мы начали создавать раздел, посвященный твердотельным накопителям, на PurePC, большинство людей сомневалось в быстрой популяризации полупроводниковых дисков, относя такие устройства к категории игрушек для аппаратных онанистов. Местные службы публикуют тесты носителей SSD очень редко, хотя уже была группа пользователей, которые признали абсолютное превосходство технологии флэш-памяти над планшетами.
Какой сайт лучший?
Какой сайт лучший? Знаете ли вы, что вас ждет во время онлайн-знакомств и как установить контакт? Если так - это здорово! Если нет ... вы все еще можете узнать! Зарегистрируйтесь на выбранном сайте и начните искать любовь на всю жизнь или случайное приключение! Убедитесь, что мнения о сайтах знакомств верны.
Как писатель-технолог, один из самых распространенных вопросов, которые мне задают, это «Какой телефон лучше всего стоит менее 200 фунтов стерлингов?
Как писатель-технолог, один из самых распространенных вопросов, которые мне задают, это «Какой телефон лучше всего стоит менее 200 фунтов стерлингов?». Мой ответ по умолчанию, как правило, зависит от того, какое устройство Motorola входит в цену ниже этой цены в момент запроса. Прямо сейчас это будет одна SIM-карта Мото G6 , который вы можете найти около £ 199. Тем не менее, смотрите дальше,
Какой ваш любимый вариант хостинга?
Какой ваш любимый вариант хостинга? Поделитесь своим опытом в разделе комментариев ниже.
СМОТРИ ТАКЖЕ: Как правильно выбрать количество освещения в комнате?
Пройти через это приложение (а если она шпион?), но какой еще вариант?
При выборе освещения для дома мы часто сталкиваемся с дилеммой, какой цвет света подходит: теплый или холодный? Ну, что будет для нас более выгодным? Дизайнер интерьера который создает дизайн дома вашей мечты, знает, как важно влияние света на настроение и функционирование домашнего хозяйства. Он также знает, что дизайн освещения является одним из самых важных, а не самых важных вопросов во всем устройстве пространства. Можно
Часть 3: Какой PC Suite лучше?
Часть 3: Какой PC Suite лучше? Мы считаем, что вы уже приняли решение. Это Wondershare Mobilego, который возглавляет список в наших предпочтениях. Lumia PC Suite полезен для базовой передачи и синхронизации. Но Mobilego далеко продвинулась благодаря своим уникальным предложениям, таким как App Mirror, Восстановление и резервное копирование в один клик и Mobile Pro, где пользователи делятся часто задаваемыми вопросами и советами по устранению неполадок. Это почти без ошибок и работает
Какой препарат подходит к какому содержанию?
Какой препарат подходит к какому содержанию? Какие формы продукта и носитель подходят? На основе клиента, выводы теперь могут быть сделаны для их собственных продуктов. В зависимости от размера целевой группы, ее предпочтений и желаний можно оценить, какие формы предложения лучше подходят, а какие - меньше. Ответ на этот вопрос прост и сложен одновременно. Просто, потому что есть многочисленные исследования и исследования, потому что есть собственные данные и потому что
При любом изменении или введении функции мы всегда спрашиваем себя: «Какой опыт мы хотим разработать здесь, чтобы наилучшим образом решить проблему пользователя?
При любом изменении или введении функции мы всегда спрашиваем себя: «Какой опыт мы хотим разработать здесь, чтобы наилучшим образом решить проблему пользователя? Требует ли этот опыт использования продвинутой производительности или анимации? » Ответ на этот вопрос будет определять, будем ли мы создавать эту функцию с помощью веб-технологии и повторно использовать ее в браузере и на Android и iOS или будем создавать ее отдельно для каждой платформы. В конечном счете, я считаю,
Итак, как вы выясните, какой из 3 наиболее подходит для вас?
Итак, как вы выясните, какой из 3 наиболее подходит для вас? Мы проведем вас через некоторые правильные вопросы, чтобы начать, чтобы начать ниже. Вот основные разделы, которые мы пройдем: Готовы? Давайте идти! 1. Как долго компания была основана? Wix - основана в 2006 году. Это также публично торгуемая компания Таким образом, они были тщательно проверены фондовой
Какой будет эффект?
Какой будет эффект? Описание продуктов с использованием расширенного стандарта GS1 SmartSearch дает каждому ощутимые преимущества: Покупатели быстрее найдут товары, которые отвечают их индивидуальным потребностям, и проверит их происхождение и подлинность Интернет-магазины получат более высокую позицию на своем сайте - чем больше будет введено атрибутов + GTIN, тем выше продажи и количество посещений. Производители демонстрируют индивидуальные

Как сэкономить?
Что такое свадьба?
И здесь возникает ряд вопросов: Как правильно подобрать тему такого торжественного мероприятия?
Какое платье выбрать?
Как будет выглядеть свадебная фотокнига?
Как мне создать заявку на онлайн поддержку?
Какой SSD диск купить?
А как насчет пола?
Как вы заканчиваете нашу розетку, чтобы мы чувствовали себя комфортно и комфортно в ней?
Вы знаете, какие строители попали в топ-10, но как вы выбираете лучших из лучших?