—»     —»   Разрабатываем дружественный с мобильными устройствами HTML5-поток видео с несколькими источниками
  Раздел: Видео   Нет комментариев  

Разрабатываем дружественный с мобильными устройствами HTML5-поток видео с несколькими источниками



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

В данном руководстве мы хотим рассказать вам о том, как разработать очень простую веб-страницу для интеграции HTML5-видео, дружественного с мобильными устройствами. Мы включили две версии одной и той же страницы – одну со стандартным элементом видео в HTML5, вторую с применением Video.js. HTML-код практически идентичен, что указывает нам на то, какой прогресс произошел в области интеграции видео в HTML за последние годы. Вы можете посмотреть демо для обеих страниц по нижеприведенным ссылкам.

Разрабатываем дружественный с мобильными устройствами HTML5-поток видео с несколькими источниками

Демо | Скачать исходный код

Стандартная структура страницы

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

Для начала давайте создадим шапку документа с дополнением скриптов. Мы включаем последнюю версию jQuery вместе со скриптом HTML5 shiv посредством Google.

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mobile-Friendly HTML5 Video Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="./css/global.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

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

<div id="w">
<h1><center>A Pup Named Scooby Doo Intro</center></h1>
<div id="videoplayer">
<center><video id="intro" controls preload="none" width="640" height="360" poster="./media/poster.png" data-setup="{}">
<source src="./media/intro.mp4" type="video/mp4">
<source src="./media/intro.webm" type="video/webm">
</video></center>

<p class="credits"><strong>Source:</strong> <a href="http://m.youtube.com/watch?v=_RozV8AVH6U">YouTube</a></p>
</div>
</div>

Сейчас вышеприведенный отрывок кода должен быть размещен внутри тела документа (тэга «body»). Он содержит наш div с оболочкой, в которой указан заголовок страницы, а также ссылку на источник – оригинальный ролик в Youtube. Но сам тэг HTML5 video включает 2 различных источника – mp4 и webm.

Иные форматы HTML5 Video

На самом деле, вы можете получить потоковые видео с помощью просто исходного файла .mp4. Большинство современных Flash-видеоплееров включают поддержку mp4-видеоконтейнеров, закодированных в H.264. То же кодирование может быть пущено напрямую через iPhone и Android (мобильная версия Youtube также предоставляет вам такую возможность).

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

Большинство современных браузеров поддерживают воспроизведение MP4 без дополнительных плагинов и кодеков. Среди них Google Chrome, Safari и свежие версии IE. Firefox и Opera – это два современных браузера, которые немного проблемно работают с MP4-видеоконтейнерами. WebM и OGG/OGV представляют собой 2 альтернативы, которые довольно хорошо подходят для этой задачи.

Тем не менее, лично нам кажется, что WebM гораздо больше распространилась. YoutTube предоставляет потоки видео, конвертированные в формате WebM, и Google полностью поддерживает этот проект с открытым исходным кодом. Также Miro Video Converter представляет собой 100% бесплатное приложение, которое конвертирует любое количество видео-файлов в WebM.

Гибкость на CSS

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

video { max-width: 100%; height: auto; }

Та же техника может быть применена к изображениям, которые не подходят по размеру к их контейнеру. По мере того, как уменьшается размер страницы, видео вылезает за пределы своего div-элемента. Если мы не дадим видео выходить за рамки 100% ширины, то оно всегда будет сохранять соотношение сторон, вне зависимости от размера.

Работа с Video.js

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

Для того чтобы начать, вам нужно скачать исходные файлы videoJS с репозитория разработчиков на github. Внутри вы найдете множество демо-файлов, но нам нужно 4 конкретных файла: video-js.min.css, video.min.js, video-js.swf и video-js.png. CSS/JS-файлы могут быть включены прямо в самом начале, в головной секции вашего документа, а файл PNG-спрайта должен быть размещен в той же папке, где находится таблица стилей.

  <link rel="stylesheet" type="text/css" href="./css/global.css">
<link rel="stylesheet" type="text/css" href="./css/video-js.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/video.min.js"></script>

Код вашего видео на HTML5 невероятно просто заставить работать при помощи библиотеки VideoJS. После интеграции необходимых файлов, найдите ваш тэг видео и добавьте следующую строку кода после атрибута ID:

class="video-js vjs-default-skin"

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

Одна проблема с VideoJS, которую мы заметили, заключается в том, что на некоторых мобильных платформах, элемент видео сохраняет свои первоначальные значения ширины/высоты, и не масштабируется. С плеером могут возникнуть проблемы при адаптации его внутри контейнера, и на экране смартфона это выглядит очень… не очень. Но стоит учесть, что данный проект до сих пор находится в стадии разработки, и здесь открыты двери сторонним разработчикам. Мы точно уверены, что спустя какое-то время мы услышим о данном проекте, как о нечто великом от команды VJS.

Разрабатываем дружественный с мобильными устройствами HTML5-поток видео с несколькими источниками

В завершение

Во всяком случае, данный код довольно прост, и здесь используются стандартные техники разработки. Сегодня очень важно понимать и уметь разрабатывать веб-страницы, которые позволяют вам представлять видео-файлы своим клиентам и посетителям. Веб-разработчики должны всегда быть в курсе новых стандартов и тенденций.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 5847   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930