Содержание

Плагин HTML5 Video Player для браузера Opera — установка и использование

Adobe Flash Player был и остается наиболее востребованным плагинов для работы интернет-площадок, воспроизведения видео- и аудиофайлов. Однако время идет, и на смену «старожиле» приходит более совершенный HTML5 Video Player для браузера Opera. Также в процессе повествования мы рассмотрим установочный процесс и практическое использование расширения.

Коротко о главном

Opera – популярный браузер, с недавних пор перешедший на движок собственного производства. С 1995 года проект активно развивался, хотя и демонстрировал взлеты с падениями.

HTML5 Video Player – популярное расширение, при помощи организуется просмотр видео и фильмов в одноименном стандарте. Оно совместимо с видеохостингом YouTube.

Установочный процесс

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

Для претворения задуманного в жизнь предназначена следующая пошаговая инструкция:

  1. Запускаем Оперу и открываем страницу https://addons.opera.com/ru/extensions/details/youtubetm-flash-html5/.
  2. На ней нужно кликнуть по опции инсталляции плагина.
  3. Ожидаем окончания процедуры.
  4. Перезапускаем браузер.

Практическое использование

Для активации встроенного функционала достаточно выполнить следующую последовательность действий:

  1. Запускам интернет-обозреватель и переходим на видеосервис YouTube.
  2. Открываем интересующее видео.
  3. Кликаем на иконку плагина.
  4. Затем нажимаем на правую кнопку.
  5. Дожидаемся перезагрузки страницы и продолжаем просмотр ролика.

Главное отличие ХТМЛ5 от Флеша – меньшая нагрузка на стационарную платформу и большая производительность при работе с видео.

Подведем итоги

HTML5 Video Player – популярное расширение для активации уже встроенной возможности воспроизведение видео при помощи нового плагина. Это сделано, дабы пользователям не пришлось влезать в секретные настройки Opera и не делать там опасных поправок.

+  Добавить HTML5 Video Player в Opera

Добавление видео и аудио с использованием HTML5

Буду с вами честен. Я всегда считал добавление мультимедиа на веб-страницы с использованием HTML 4.01 настоящей мукой. Это не сложный, а просто запутанный процесс. HTML5 делает все значительно проще. Необходимый для этого синтаксис очень похож на тот, что используется для добавления изображений:

<video src=»myVideo. ogg»></video>

Это глоток свежего воздуха для большинства веб-дизайнеров! Вместо того чтобы писать объемный код, необходимый для включения видео в страницу, можно поручить тегу <video></video> (или тегу <audio></audio> для аудио) всю тяжелую работу. Можно также вставить примечание между открывающим и закрывающим тегами для уведомления пользователей на тот случай, если они будут применять несовместимые с HTML5 браузеры. Кроме того, имеются дополнительные атрибуты, например height и width. Добавим их:

<video src=»video/myVideo. mp4″>What, do you mean you don’t understand HTML5?</video>

Теперь, если мы вставим приведенный чуть выше фрагмент кода в разметку нашей страницы, а затем взглянем на нее в браузере Safari, то увидим, что элементы управления воспроизведением отсутствуют. Чтобы они отобразились по умолчанию, нам необходимо добавить атрибут controls. Можно также добавить атрибут autoplay (но делать это все же не рекомендуется, поскольку никому не нравится, когда воспроизведение видео запускается автоматически). Добавление названных атрибутов демонстрируется в следующем фрагменте кода:

<video src=»video/myVideo. mp4″ controls autoplay>What, do you mean you don’t understand HTML5?</video>

Результат применения приведенного чуть выше фрагмента кода показан На рисунке 4.6.

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

К прочим атрибутам относится preload для управления предварительной загрузкой мультимедиа (разработчики, впервые использовавшие HTML5, должны обратить внимание на то, что атрибут preload пришел на смену autobuffer), loop для повторного воспроизведения видео и poster для определения кадра видео, который будет показан до начала воспроизведения. Последний атрибут окажется полезен, если в воспроизведении видео возможна задержка. Чтобы использовать тот или иной атрибут, нужно просто добавить его в соответствующий тег. Вот пример включения всех упоминавшихся чуть ранее атрибутов:

<video src=»video/myVideo. mp4″ controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>What, do you mean you don’t understand HTML5?</video>

Обеспечение альтернативных файлов-источников.

Первоначальная HTML5-спецификация предусматривала поддержку всеми браузерами прямого воспроизведения (без плагинов) видео и аудио в контейнерах Ogg. Однако из-за споров между участниками рабочей группы HTML5 требование по поводу поддержки Ogg (включая Theora-видео и Vorbis-аудио) в качестве базового стандарта было удалено из более поздних версий HTML5-спецификации. По этой причине сейчас одни браузеры поддерживают воспроизведение одного набора видео и аудиофайлов, а другие — другого. Например, Safari поддерживает использование в сочетании с элементами <video> и <audio> только медиа MP4/H.264/ AAC, в то время как Firefox и Opera поддерживают лишь Ogg и WebM.

К счастью, есть способ обеспечить поддержку разных форматов в одном теге. Однако это не избавит нас от необходимости создавать разные версии нашего мультимедиа. Хотя мы все и держим пальцы скрещенными в надежде на то, что текущая ситуация со временем разрешится, между тем, вооружившись разными версиями нашего файла, мы можем разметить <video> следующим образом:

<video controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>

<source src=»video/myVideo. ogv» type=»video/ogg»>

<source src=»video/myVideo. mp4″ type=»video/mp4″>

What, do you mean you don’t understand HTML5?

</video>

Если браузер поддерживает воспроизведение Ogg, то он будет использовать соответствующий файл; в противном случае браузер перейдет к следующему тегу <source>.

Резервные варианты для устаревших браузеров.

Использование тега <source> позволяет предусмотреть при необходимости несколько резервных вариантов. Например, наряду с обеспечением версий MP4 и Ogg мы, если потребуется включить подходящий резервный вариант для Internet Explorer версии 8 и ниже, можем добавить в качестве альтернативы Flash-видео. Более того, если у определенного пользователя не окажется подходящей технологии воспроизведения, мы можем предусмотреть для него ссылки на скачивание самих файлов:

<video controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>

<source src=»video/myVideo. mp4″ type=»video/mp4″>

<source src=»video/myVideo. ogv» type=»video/ogg»>

<object type=»application/x-shockwaveflash» data=»myFlashVideo. SWF»>

<param name=»movie» value=»myFlashVideo. swf» />

<param name=»flashvars» value=»controlbar=over&amp;image=myVideoPoster. jpg&amp;file=video/myVideo. mp4″ />

<img src=»myVideoPoster. jpg» alt=» TITLE «

Title=»No video playback capabilities, please download the video below» /> </object>

<p> <b>Download Video:</b>

MP4 Format: <a href=»myVideo. mp4″>»MP4″</a>

Ogg Format: <a href=»myVideo. ogv»>»Ogg»</a>

</p>

</video>

Теги <audio> и <video> работают почти одинаково.

Тег <audio> работает по тому же принципу и с теми же атрибутами, что и <video>, не поддерживая лишь атрибуты width, height и poster. Да, вы можете использовать теги <video> и <audio> почти как взаимозаменяемые. Основное различие между ними заключается в том, что <audio> не имеет области воспроизведения для видимого содержимого.

Вам также могут быть интересны следующие статьи:

HTML5 | Видео

Видео

Последнее обновление: 21.04.2016

Для воспроизведения видео в HTML5 используется элемент video. Чтобы настроить данный элемент, мы можем использовать следующие его атрибуты:

  • src: источник видео, это может быть какой-либо видеофайл

  • width: ширина элемента

  • height: высота элемента

  • controls: добавляет элементы управления воспроизведением

  • autoplay: устанавливает автовоспроизведение

  • loop: задает повторение видео

  • muted: отключает звук по умолчанию

Хотя мы можем установить ширину и высоту, но они не окажут никакого влияния на аспектное отношения ширины и высоты самого видео. Например, если видео имеет формат 375×240, то, к примеру, при настройках width="375" видео будет центрироваться на 280-пиксельном пространстве в HTML. Что позволяет избавить видео от искажений, которые были бы при растягивании.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Видео в HTML5</title>
	</head>
	<body>
		<video src="cats.mp4" controls ></video>
	</body>
</html>

Применим атрибуты autoplay и loop:


<video src="cats.mp4" controls autoplay loop ></video>

Теперь видео будет автоматически проигрываться бесконечное число раз.

Если при воспроизведении надо отключить звук, то мы можем воспользоваться атрибутом muted:


<video src="cats.mp4" controls muted ></video>

Атрибут preload

Еще один атрибут — preload призван управлять загрузкой видео.

Он принимает следующие значения:

  • auto: видео и связанные с ним метаданные будут загружаться до того, как видео начнет воспроизводиться.

  • none: видео не будет загружаться в фоне, пока пользователь не нажмет на кнопку начала проигрывания

  • metadata: в фоне до воспроизведения будут загружаться только метаданные (данные о формате, длительности и т.д), само видео не загружается

<video src="cats.mp4" controls preload="auto"></video>

Атрибут poster

Атрибут poster позволяет установить изображение, которое будет отображаться до запуска видео. Этому атрибуту в качестве значения передается путь к изображению:

<video src="cats.mp4" controls poster="mycat.jpg"></video>

Поддержка форматов видео

Главной проблемой при использовании элемента video является поддержка различными веб-браузерами определенных форматов. С помощью вложенных элементов source можно задать несколько источников видео, один из которых будет использоваться:


<video controls>
	<source src="cats.mp4" type="video/mp4">
	<source src="cats.webm" type="video/webm">
	<source src="cats.ogv" type="video/ogg">
</video>

Элемент source использует два атрибута для установки источника видео:

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

10 дополнительных функций в проигрывателе HTML5

Мы рассмотрели основы добавления видео на вашу веб-страницу с помощью элемента и кратко перечислили более сложные функции элемента в предыдущем сообщении в блоге.

В этом сообщении блога мы более подробно рассмотрим 10 из этих расширенных функций и объясним на примерах кода, как вы можете использовать их на своем веб-сайте в видеопроигрывателях HTML.

Покроем:

  1. Указание нескольких источников для видео
  2. Отображение или скрытие элементов управления видеопроигрывателем
  3. Запуск или остановка видео в определенный момент или метка времени
  4. Показать постер или миниатюру видео перед запуском видео
  5. Предварительно загрузить видео перед воспроизведением
  6. Воспроизведение видео в браузере Safari в iOS
  7. Автовоспроизведение, зацикливание и отключение звука
  8. Отображение титров или субтитров во время воспроизведения
  9. Доступ к дополнительным функциям с помощью JavaScript
  10. Подгонка видео с портретной ориентацией в проигрывателях с альбомной ориентацией с помощью свойства CSS object-fit

Указание нескольких источников для видео

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

Можно указать несколько источников с помощью элементов . Также рекомендуется указывать тип MIME с помощью необязательного атрибута type .

Вот пример:

  <элементы управления видео>

Список источников пробуем сверху вниз.

Если доступен только один видеоформат, его можно указать напрямую с помощью атрибута src :

Отображение или скрытие элементов управления видеопроигрывателем

Элементы управления, такие как воспроизведение / пауза, громкость, полноэкранный режим и ползунок поиска, можно легко переключать с помощью элементов управления . Атрибут :

  <элементы управления видео src = "https: // s3. eu-central-1.amazonaws.com/pipe.public.content/short.mp4 "preload =" none ">

Если вы не укажете атрибут, элементы управления отображаться не будут.

Некоторые определенные элементы управления можно скрыть отдельно с помощью атрибута controlsList (только Chrome 58+), например:

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

Дополнительные примеры управления пользовательским интерфейсом видеопроигрывателя Chrome по умолчанию можно найти здесь.

Запуск или остановка видео в определенный момент или метка времени

Использование фрагментов мультимедиа (привязка # t = в src ) вы можете указать время, в которое видео должно начинать воспроизведение и завершать воспроизведение. В этом примере воспроизведение видео начнется на 15-й секунде и закончится на 20-й секунде:

.
  <элементы управления видео src = "https: //s3.eu-central-1.amazonaws.com/pipe.public.content/short.mp4#t=15,20 "preload =" metadata ">

Другие примеры:

# t = 10,20 => результаты во временном интервале [10,20)
# t =, 20 => результаты во временном интервале [0,20)
# t = 10 => результаты во временном интервале [10, конец)

Показать постер или миниатюру видео перед запуском видео

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

Чтобы на видео был плакат, вам просто нужно добавить атрибут poster и URL-адрес изображения плаката:

Предварительно загрузить видео перед воспроизведением

Видео можно предварительно загрузить несколькими способами, добавив атрибут preload .

Существуют следующие варианты:

  • нет — предварительная нагрузка не выполняется
  • метаданные — предварительно загружаются только метаданные: размеры, первый кадр, список треков, продолжительность и т. Д.
  • авто — аудио / видео должно начать загружаться, как только страница загрузится

Во всех вышеперечисленных проигрывателях мы использовали preload = "none" , чтобы предотвратить загрузку видео вместе с веб-страницей, поскольку он может использовать значительный объем данных, даже если пользователь не будет воспроизводить видео.Таким образом, мы можем получить высокий счет за передачу данных от нашего хостинг-провайдера, если этот пост в блоге получит много просмотров.

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

Воспроизведение видео в браузере Safari на iOS

Safari на iOS 10+ поддерживает встроенное воспроизведение видео.Вплоть до iOS9 включительно веб-видео при воспроизведении отображались на устройстве в полноэкранном режиме. Чтобы включить встроенное воспроизведение, необходимо использовать атрибут playsinline :

Автовоспроизведение, зацикливание и отключение звука

Автозапуск

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

  <элементы управления автовоспроизведением видео src = "https: // s3. eu-central-1.amazonaws.com/pipe.public.content/short.mp4 ">

Автовоспроизведение с отключенным звуком работает в Safari на iOS10 + (но не в режиме низкого энергопотребления) и в Chrome 53+ на Android. Для получения дополнительных сведений ознакомьтесь с новыми политиками

Петля

Если вы хотите, чтобы видео воспроизводилось в цикле, вы можете использовать атрибут loop :

  <элементы управления петлей видео src = "https: // s3.eu-central-1.amazonaws.com/pipe.public.content/short.mp4 ">

Отключить звук

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

  <элементы управления отключением звука src = "https://s3.eu-central-1.amazonaws.com/pipe.public.content/short.mp4">

Вот такое же встроенное видео, но на этот раз с добавленным атрибутом отключения звука:

Отображение титров или субтитров во время воспроизведения

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

Элемент функционирует точно так же, как элемент внутри элемента . Он имеет атрибут src , который указывает на файл в формате WebVTT. Используя метку , вы можете указать имя, которое будет отображаться пользователю в пользовательском интерфейсе. С помощью srclang вы можете указать язык для подписей. Атрибут kind задает способ использования дорожки со следующими параметрами: субтитры (по умолчанию), подписи, описания, главы и метаданные.

При загрузке субтитров с перекрестным происхождением может потребоваться указать атрибут crossorigin = "anonymous" . Веб-сервер, обслуживающий файлы .vtt, может также предоставить заголовок Content-Type: text / vtt для файлов .vtt.

Для получения дополнительной информации по этой теме я рекомендую статьи Иэна Девлина на эту тему: Помощь с WebVTT, Google Chrome поддерживает субтитры WebVTT, WebVTT, а также аудио и субтитры к видео HTML5 — текущий статус браузера.

Доступ к дополнительным функциям с помощью JavaScript

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

Подгонка портретных видео к плеерам с альбомной ориентацией с помощью Object-Fit

Свойство object-fit CSS определяет, как содержимое элементов img и video должно быть изменено, чтобы соответствовать их контейнеру. object-fit может принимать несколько значений:

  • содержат — видео будет масштабировано по размеру контейнера с сохранением соотношения сторон, почтовый ящик будет присутствовать вокруг видео
  • крышка — видео масштабируется для заполнения контейнера с сохранением соотношения сторон, видео будет обрезано
  • fill — видео масштабируется для заполнения контейнера без сохранения соотношения сторон, видео будет растянуто
  • нет — размер видео не изменен

Вот видео с портретной ориентацией, помещенное в видеопроигрыватель с альбомной ориентацией с использованием object-fit: contain CSS. Видео уменьшено до размера контейнера. Сохраняется портретное соотношение сторон видео, чтобы не искажать видео, что приводит к появлению почтовых ящиков по бокам:

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

Как HTML5 улучшает доступность видео в Интернете

Большинство браузеров адаптировали базовые функции видео, предлагаемые HTML5, как и популярные облачные медиаплееры, такие как Video.js и JW Player. Некоторые браузеры обеспечивают лучшую доступность видео, чем другие.

Лучше всего то, что видео HTML5 предлагает стандартизированный формат субтитров, который работает на всех настольных устройствах и браузерах.

Почему титры видео в HTML были такими сложными?

В старых версиях HTML не было стандарта для рендеринга видео на веб-странице. Почти все видео показывались через плагины, такие как QuickTime, Silverlight или RealPlayer.

Без стандартизации вы столкнулись с конфликтами совместимости между различными браузерами и устройствами. И хотя веб-издатели пытаются создать избыточность и резервные положения для максимальной совместимости, было практически невозможно опубликовать видео, которое работало бы повсеместно.

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

Как работают субтитры HTML5 для видео

HTML5 — важный шаг вперед в стандартизации видео для веб-браузеров и устройств и, таким образом, упрощении субтитров. Идея состоит в том, что веб-видео будет основано на открытом универсальном стандарте, который работает везде.

HTML5 изначально поддерживает видео без использования сторонних плагинов.Видео можно добавить на веб-страницу с помощью элемента video , что делает его почти таким же простым, как добавление изображения.

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

Приведенный ниже HTML-код показывает, как работают эти элементы:

Атрибуты элемента дорожки работают следующим образом:

src — указывает URL-адрес файла с заголовками
label — указывает заголовок дорожка
вид — указывает тип текста, выровненного по времени.Возможные варианты: подписи, субтитры, главы, описания или метаданные.
srclang — указывает язык
по умолчанию — указывает, что эта дорожка включена по умолчанию. Обратите внимание, что одновременно можно использовать несколько элементов дорожки.

Что такое стандартный формат субтитров для видео HTML5?

В течение нескольких лет два формата субтитров соревновались за доминирование в видео HTML5. Отчасти это связано с тем, что над HTML5 сотрудничают две группы: Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG) и Консорциум World Wide Web (W3C).

WHATWG разработала и предложила формат субтитров WebVTT (Web Video Text Tracks), который представляет собой новый удобный текстовый формат, состоящий из номеров строк, временных шкал и текста с параметрами форматирования. WebVTT похож на широко распространенный формат SRT, но поддерживает форматирование текста, позиционирование и параметры рендеринга (всплывающее, вращающееся, рисование).

W3C предложила использовать TTML (язык разметки текста по времени), который является широко распространенным форматом XML, поддерживаемым в Adobe Flash и Microsoft Silverlight.

В конце концов, W3C решил поддержать WebVTT. WebVTT теперь является общепринятым стандартным форматом для видео HTML5.

Формат заголовка WebVTT

Формат заголовка WebVTT представляет собой текстовый файл с расширением .vtt. Файл начинается с заголовка «WEBVTT FILE», за которым следуют реплики и соответствующий текст.

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

 WEBVTT

1
00: 00: 13.000 -> 00: 00: 016.100
  АРНЕ ДУНКАН:  Я начну и
затем передайте его вам.

2
00: 00: 16.100 -> 00: 00: 20.100
Это так критически важно
чтобы родители были активно вовлечены

Как встроить видео HTML5 в электронную почту

В этой статье вы узнаете, как встраивать видео HTML5, чтобы его можно было воспроизводить в почтовых клиентах, поддерживающих видео в электронной почте, в частности, в Apple Mail, iOS 10 и почтовом клиенте Samsung.В нем также будут рассмотрены различные методы отката для клиентов, которые не могут воспроизводить видео.

Щелкните здесь, чтобы увидеть полный код

Email on Acid позволяет предварительно просмотреть свой код в более чем 70 почтовых клиентах и ​​устройствах, чтобы вы точно знали, как будет выглядеть дизайн, когда он попадет в почтовый ящик. Поскольку видео может быть очень сложным, особенно важно проверить свою электронную почту, прежде чем отправлять ее подписчикам.

Но это того стоит. Статистика видеомаркетинга не лжет.

Поддержка клиентов электронной почты

Как видно из таблицы ниже, поддержка видео HTML5 ограничена.Однако клиенты, которые его поддерживают, составляют более половины доли рынка. Почтовые приложения, такие как собственный клиент iOS, Apple Mail и почтовый клиент Samsung, позволят получателям воспроизводить ваше видео в самом почтовом клиенте. Другие клиенты, такие как Gmail и устройства Android, будут отображать резервное изображение.

Клиент воспроизводит видео Показывает запасной вариант
Android 4, собственный клиент ✔
AOL Mail ✔
Apple Mail * ✔
Gmail Веб-почта ✔
Gmail Android ✔
Gmail iOS ✔
Lotus Notes ✔
Outlook 2003-2016 ✔
Outlook для Mac * ✔
Outlook Android ✔
Outlook iOS ✔
Outlook. com ✔
iOS 10+, собственный клиент ✔
iOS 9, собственный клиент ✔
Samsung Galaxy, собственный клиент ✔
Thunderbird ✔
Yahoo! Почта ✔
Yahoo! Почта Android ✔
Yahoo! Почта iOS ✔
* См. Ниже информацию о проблемах с почтовыми клиентами Apple Mac

Базовый код видео

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

Отклонения, зависящие от клиента

Однако многие почтовые клиенты не позволяют подписчикам просматривать ваше видео. Некоторые клиенты, такие как iOS 8 и Android 4, будут отображать обложку видео, но видео останется невоспроизводимым, что может вызвать путаницу у получателя. Таким образом, безопасная ставка — отображать отдельный резервный раздел по умолчанию и отображать только раздел видео в клиентах, которые могут воспроизводить видео.Ознакомьтесь с приведенным ниже кодом, чтобы узнать, как это сделать:

.
  


  
 Видеоконтент: MP4 







  
 Резервное содержание

Начиная с Yahoo! Отображение почтовых полос: нет встроенных, вам также необходимо добавить это в:

  <стиль>
 .video-wrapper {display: none;}

Отображение видео на клиентах, поддерживающих видео

iOS 10 и выше

Почтовый клиент iOS 7 поддерживал видео, но Apple удалила эту поддержку в iOS 8 и 9.Затем Apple снова добавила поддержку видео в iOS 10. К сожалению, почтовые клиенты iOS 8 и 9 по-прежнему будут отображать видео с помощью кнопки воспроизведения, но не будут воспроизводить видео.

Имея это в виду, нам нужен способ отображать видеоконтент только в iOS 10. Наш друг Реми Парментье обнаружил умный метод для отображения видео только в iOS 10 с помощью объявления @supports. Он нацелен на определенный CSS, который поддерживает iOS 10, но не iOS 9. Ознакомьтесь с его объяснением здесь.

Однако Yahoo! Почте не нравится объявление @supports, и он будет отображать любой CSS в блоке в электронном письме.= резервное видео] {display: none! important; } }

Клиенты Apple Mac: Apple Mail и Outlook для Mac

Для клиентов на базе Mac мы можем использовать медиа-запрос -webkit-min-device-pixel-ratio, чтобы включить видео. Однако нам также необходимо запретить отображение видео в клиентах iOS 8. Исправление состоит в том, чтобы добавить запрос минимальной ширины устройства, который шире, чем ширина клиентского устройства электронной почты iPad. Интересно, что этот медиа-запрос активируется в AOL Mail (который не поддерживает видео) для браузеров webkit, таких как Chrome и Safari, но, к счастью, AOL Mail просто отобразит резервное изображение и ссылку, встроенную в тег видео.

  @media (-webkit-min-device-pixel-ratio: 0) и (min-device-width: 1024px)
{
  .видео-оболочка {дисплей: блок! важно; }
  .video-fallback {дисплей: нет! важно; }
}
Outlook для Mac требует щелчка правой кнопкой мыши для воспроизведения видео

К сожалению, у Outlook для Mac есть особенность, заключающаяся в том, что он не воспроизводит видео, когда пользователь нажимает кнопку воспроизведения. Читатель должен щелкнуть правой кнопкой мыши, чтобы открыть меню, а затем нажать «Играть» в меню. Это может сбить с толку читателей, которые не знакомы с этим ограничением.

Для учета в Outlook для Mac у нас есть следующие варианты:

  1. Откат дисплея для клиентов на базе Mac

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

  1. Добавить инструкции на изображение плаката

Поскольку изображение плаката (атрибут плаката в теге видео) будет отображаться по умолчанию, вы можете добавить к изображению текст с инструкциями, например «щелкните правой кнопкой мыши, чтобы воспроизвести видео».Если вы не хотите, чтобы этот текст также отображался в iOS, вы можете создать отдельный видеоблок с настраиваемым постером (т. Е. Использовать другое имя класса .video-wrapper-mac) и настроить таргетинг на указанный выше медиа-запрос только для этого. блокировать.

Кроме того, вы можете разместить текст в

над или под видео, который будет отображаться только в клиентах Apple Mac.

  1. Автозапуск

Добавив атрибут autoplay = ”autoplay”, вы можете заставить видео воспроизводиться автоматически в клиентах Mac. Это устраняет необходимость инструктировать получателя нажать опцию воспроизведения. Однако имейте в виду, что некоторым получателям не нравятся видео, которые воспроизводятся автоматически, особенно если они содержат громкую музыку.

Видео не воспроизводятся автоматически в почтовых клиентах iOS на iPhone, но будут автоматически воспроизводиться на iPad, если для видео установлен атрибут отключения звука. Подробнее о документации Apple по видео для iOS можно прочитать здесь. (Статья относится к видео в Интернете, а не к электронной почте, и хотя в статье рекомендуется использовать встроенный медиа-запрос -webkit-video-playable-inline, он не распознается в iOS 10 (работает на iOS 11) или в клиенте Samsung для Android.)

Клиент электронной почты Samsung

Хотя это не часто обсуждается, почтовый клиент Samsung, который предустановлен в линейке телефонов Galaxy, поддерживает видео. Если вы хотите отображать видео в этом клиенте, вы можете использовать следующий CSS:

  #MessageViewBody .video-wrapper {display: block! Important; }
#MessageViewBody .video-fallback {display: none! Important; }

Полный код для встраивания видео HTML5 в электронную почту 

  


 Видео в тесте электронной почты 



 Видео в тесте электронной почты  





  
 Видеоконтент 







  
 Резервное содержание

Щелкните здесь, чтобы увидеть код в CodePen

Видеоформаты для использования в электронной почте

HTML5 поддерживает три основных формата видео: MP4, OGG и WebM. Из-за проблем с интеллектуальной собственностью Apple решила поддерживать только MP4 в своих браузерах и почтовых клиентах, поэтому MP4 — единственный формат, который я рекомендую использовать для видео в электронной почте.

Вы также должны убедиться, что ваш сервер настроен для вывода правильного типа MIME, чтобы почтовый клиент мог определять правильный формат видео при получении видео.Прочтите эту статью для получения более подробной информации. Если вы используете веб-сервер Apache, убедитесь, что эта запись находится в вашем файле .htaccess:

  AddType video / mp4 .mp4 .m4v

Следует ли использовать видео в электронной почте?

Хотя встраивание видео в электронную почту несложно, это не так уж и тривиально. Некоторые маркетологи по электронной почте рекомендуют просто отображать фальшивую кнопку воспроизведения на изображении и при этом открывать в браузере целевую страницу, на которой размещено видео. Другие предпочитают отображать анимированный GIF-файл, преобразованный из видео, поскольку анимированные GIF-файлы поддерживаются во всех почтовых клиентах, кроме Microsoft Outlook.

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

Если вы решили использовать видео в своей электронной почте, убедитесь, что вы убедитесь, что ваша электронная почта будет правильно отображаться в самых популярных почтовых клиентах.Электронная почта на Acid может помочь вам проверить свою электронную почту на более чем 70 клиентах и ​​устройствах за секунды. Попробуйте нашу платформу бесплатно в течение семи дней и убедитесь в этом сами.

ТЕСТ СЕГОДНЯ!

Примечание редактора: Эта статья была обновлена ​​24 августа 2018 г. Ранее она была обновлена ​​в декабре 2017 г.

Автор: Джастин Кху

Экстраординарный разработчик электронной почты и автор FreshInbox, блога, посвященного интерактивным и передовым технологиям дизайна электронной почты и новостям.

Автор: Джастин Кху

Экстраординарный разработчик электронной почты и автор FreshInbox, блога, посвященного интерактивным и передовым технологиям дизайна электронной почты и новостям.

новый код — HTML5 Video

HTML5-видео имеет тот же синтаксис, что и HTML5-аудио, но, как правило, больше привлекает посетителей.

Элемент видео

Сегодня каждый современный графический браузер поддерживает расширение.mp4 (MPEG-4), поэтому это должен быть минимальный стандарт, предлагаемый вашим сайтом:

  <управление видео src = "drone.mp4">

По умолчанию видео будет отображаться с исходным разрешением и размером.

Как и элемент , атрибут controls будет создавать «встроенные» элементы пользовательского интерфейса, специфичные для браузера, версии, платформы и операционной системы. Вы можете создавать свои собственные элементы пользовательского интерфейса, но они должны быть тщательно продуманы и требуют JavaScript.Также как , поддерживает атрибуты preload , loop и autoplay . За исключением, возможно, фонового видео, следует избегать автоматического воспроизведения и зацикливания . Большинство современных браузеров будут поддерживать автозапуск только в том случае, если также применен атрибут отключения звука :

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

Решение состоит в том, чтобы использовать атрибут poster , направленный на изображение (обычно снимок экрана видео в формате JPEG в какой-то интересный момент) с тем же соотношением сторон, что и видео:

Атрибут плакат лучше всего работает с видео, для которых не установлено значение автовоспроизведение .

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

предварительный натяг

Атрибут preload предоставляет «подсказки» относительно того, какая часть видео должна быть «зарезервирована» браузером. Следует подчеркнуть, что это предложения: браузер может решить не следовать подсказке из-за состояния сети, уровня заряда батареи и других факторов.

Атрибут preload может принимать три значения: нет, метаданные и авто.

  • нет : видео не должно быть предварительно загружено.
  • метаданные : предварительно выбирается только такая информация, как длина видео; видеокадры могут быть предварительно загружены, а могут и не быть.
  • auto : загрузка всего видео до того, как пользователь нажмет кнопку воспроизведения, была бы идеальной (но, опять же, браузер может не последовать предложению).

Использование атрибута предварительной загрузки можно представить как , делающий ставку на взаимодействие пользователя с видео . Значение auto (или пустая запись, то есть просто имя атрибута, или preload = "" ) следует использовать, если вы считаете, что с большой вероятностью будет воспроизводить видео. preload = "metadata" следует использовать, если решение пользователя о воспроизведении может быть основано на длине видео.

прослушиванийинлайн

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

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

Атрибут playsinline решает эту проблему:

Такое видео будет воспроизводиться на устройстве в исходном формате, не закрывая содержимое страницы.

Жидкое видео

Размер видео должен изменяться так же, как изображения на веб-странице, с использованием того же метода CSS:

  видео {
    ширина: 100%;
    высота: авто;
}

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

Одним из преимуществ размещения собственного видео является то, что к нему можно применить любой CSS. Чувствуете себя в настроении «нуар» и хотите, чтобы ваши видео были черно-белыми? Нет необходимости редактировать и повторно экспортировать видео; просто примените к нему фильтр CSS:

  видео {
    фильтр: оттенки серого (100%)
}

Поддержка других форматов

Хотя MP4 имеет универсальную поддержку, ему уже почти два десятилетия, и он не очень эффективен по сравнению с более поздними альтернативами. Вы можете обнаружить, что преобразование видео в формат WebM дает значительную экономию в размере файла и затратах на полосу пропускания.

К сожалению, WebM еще не поддерживается повсеместно. В этом случае вы должны сначала предоставить версию webm в качестве источника, используя mp4 в качестве запасного варианта:

  <элементы управления видео>

Обратите внимание, что это не два разных фрагмента видеоконтента или список воспроизведения; скорее, это одно и то же видео, представленное в двух разных кодеках. Браузеры, поддерживающие webm, предпочтительно загружают файлы (меньше, быстрее загружаются).файл webm; браузеры, которые не загружают версию .mp4. Атрибуты в теге видео будут применяться к обеим версиям.

Иногда вы будете видеть код, который включает MIME-тип видео:

  <элементы управления видео>

Часто это сочетается с советом добавить в файл .htaccess вашего сайта следующее:

  AddType video / webm.webm
AddType video / mp4 .mp4

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

Видео Людовика Гиберта, используется в соответствии с общей лицензией Creative Commons Attribution 2.0

Вам понравился этот фрагмент? Я приглашаю вас подписаться на меня в твиттере.com / dudleystorey, чтобы узнать больше.

5 шагов для создания видео HTML5

В прошлом настройка видео была относительно простой концепцией с использованием плагинов Flash. Пока не появился iPad и не начала развиваться спецификация HTML, многие люди были довольны результатами. По мере того, как это изменилось, изменилось управление цифровыми правами (DRM) и другие аспекты видео. Одним из аспектов HTML5 было решение проблем безопасности, присущих Flash.

Чтобы получить внутреннюю информацию о том, как настроить видео HTML5, я поговорил с Крейгом Шумейкером.По словам Крейга, «реализация была неравномерной. Разные производители браузеров не согласны с форматами кодирования, которые они будут поддерживать. На практике это означает, что вам нужно взять исходный видеоформат и закодировать его в несколько разных форматов, чтобы он работал для всех ».

В этой статье мы рассмотрим 5 шагов, необходимых для успешной реализации видео в вашем браузере.

1. Подумайте, какие браузеры важны для вас. Чтобы узнать, какие форматы использовать для браузера, перейдите по ссылке ниже в сети разработчиков Mozilla: https: // developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

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

· http://easyhtml5video.com/

· http://www.mirovideoconverter.com/

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

3. Следующим шагом будет размещение видео на ваших страницах.

Хотя вы можете использовать только текущие форматы, это неразумно, — говорит Крейг. «Даже сегодня рекомендуется иметь резервный формат для создаваемых вами страниц, поэтому в случае, если ни один из используемых вами форматов не поддерживается браузером, вы все равно можете обслуживать свой контент с помощью Flash-плеера, хотя его становится все меньше. проблемы по мере продвижения вперед ».

Вот пример кода, который вы будете использовать для воспроизведения Flash.Ссылка: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

4. Встроенные элементы мультимедиа имеют параметры управления, которые можно включать / выключать без необходимости писать сценарии. Вы можете отключить кнопку воспроизведения и паузы, панель управления, вы можете указать файлу автозапуск и автоматически зацикливаться. Все это доступно через разметку медиа-элемента. Чтобы узнать, какие варианты доступны, посетите: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video, чтобы узнать больше об элементе

5. После этого вы завершите работу с видео API, возможно, реализовав некоторые элементы управления для быстрой перемотки вперед, приостановки или, возможно, перехода от одного видео к другому, где вы создадите функциональность списка воспроизведения. Все это доступно через JavaScript. Это руководство дает вам информацию о том, что делать: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

HTML5 Видео советы

При использовании тега

При создании видео учитывайте размер видео на ваших страницах. Хотя можно масштабировать видео в соответствии с размером страницы, гораздо лучше выводить видео в соответствии с фактическим размером, используемым на странице. Еще одно соображение — размер файла. Чем меньше размер файла, тем быстрее загрузится видео.

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

Еще одно соображение — это длина ваших видео. Если вы работаете с «холодным трафиком», подойдет видео длительностью 1–3 минуты. В ситуациях, когда ваша аудитория знает вас лучше, можно использовать более длинные видео.

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

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

С мобильным телефоном есть некоторые проблемы. Лучше всего сначала встроить код .MP4. Это позволит устройствам iOS немедленно распознать его.

О Craig Shoemaker

Пройдите следующие курсы b Craig Shoemaker: https: // www.pluralsight.com/search?q=craig+shoemaker&categories=course Для тех из вас, кто хочет больше информации о его биографии, вот его биография: https://www.pluralsight.com/authors/craig-shoemaker и его идентификатор в Twitter: https : //twitter.com/craigshoemaker

Другой источник информации: http://www.w3schools.com/tags/tag_video.asp

WebAIM: будущая веб-доступность: HTML5

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

Тег