Что такое embed player
Как сделать собственный видео-плеер на HTML5 Video
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.
Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.
Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
API для управления воспроизведением
Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.
Интерфейс HTMLMediaElement
Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:
Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео
Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука [0, 1]
play() — начать проигрывание
pause() — поставить на паузу
События
oncanplay — можно начать проигрывание
ontimeupdate — изменена позиция проигрывания
onplay — запущено проигрыв
onpause — нажата пауза
onended — воспроизведение закончилось
Важно: это далеко не все методы и свойства, выставляемые через интерфейс HTMLMediaElement.
Интерфейс HTMLVideoElement
Видео отличается от аудио несколькими дополнительными свойствами:
width и height — ширина и высота контейнера для проигрывания видео;
videoWidth и videoHeight — внутреннее значение ширины и высоты видео, если размеры не известны, равны 0;
poster — ссылка на картинку, которую можно показывать, пока видео недоступно (обычно это один
из первых непустых кадров).
Разница между width/height и videoWidth/videoHeight в том, что последние — это собственные характеристики видео, в частности, с учетом соотношения сторон и других характеристик, в то время как контейнер для видео может быть любых размеров (больше, меньше, с другой пропорцией).
Play & Pause
Создание нашего собственного видео-плеера мы начнем с простой задачи: научимся запускать видео на проигрывание и останавливать воспроизведение. Для этого нам понадобятся методы play() и pause() и несколько свойств, описывающих текущее состояние видео-потока (мы также будем использовать библиотеку jQuery, не забудьте ее подключить).
Первым делом нам необходим video-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:
Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).
Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:
При желании можно сразу добавить несколько css-стилей для кнопок управления и их различных состояний и.
… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.
Проигрывание сначала
Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:
Контекстное меню
Во-вторых, браузеры обычно добавляют возможность управлять воспроизведением через контекстное меню. Это означает, что пользователь, вообще говоря, может что-то изменить в обход наших элементов управления. Этот момент нужно также отловить и внести необходимые изменения во внешний вид контролов. Для этого достаточно подписаться на события onplay и onpause.
Так как у нас становится многовато мест, где меняется внешний вид, самое время попутно произвести небольшой рефакторинг, убрав из изначального переключения режимов теперь уже дублирующую смену внешнего состояния:
Кликабельное видео
Наконец, наверняка, нам захочется, чтобы проигрывание и пауза переключались по нажатию на само видео, поэтому нужно добавить еще несколько строчек:
Текущий результат:
Прогресс
Теперь давайте перейдем к отображению прогресса проигрывания. Для начала необходимо добавить несколько элементов, которые будут использоваться для отображения текущего состояния и управления текущей позицией:
И соответствующие стили:
И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:
Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration. Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay:
В данном случае, мы попутно определяем, нужно ли отображать количество часов в видео-плеере (кстати, вообще говоря, спецификация предполагает, что длительность ролика может изменяться — в этот момент срабатывает событие ondurationchange, и к тому же быть бесконечной — например, при стриминге радио).
Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:
Для отображения процесса проигрывания нам понадобится событие ontimeupdate, срабатывающее при изменении текущего момента:
Свойство currentTime выдает в секундах текущее время. Его же можно использовать, чтобы изменить время проигрывания:
Также будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:
Важный нюанс относительно свойства buffered, который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.
Промежуточный результат:
Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):
С соответствующими стилями для включенного и выключенного состояний:
Для переключения состояния динамика нам понадобится свойство mute:
(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume, принимающее значения в диапазоне [0, 1].
Финальный результат:
Что еще.
Либо нужно делать соответствующие проверки или отлавливать возможные исключения. Исключения вообще надо отлавливать, например, событие onerror, возникающее при ошибке загрузки видео-потока 🙂
Из дополнительных опций, которые могут вам понадобиться: изменение скорости проигрывания. Для этого есть свойство playbackRate и соответствующее событие onratechange.
Embed и object — Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим про теги (что это такое?) embed и object, которые служат для вставки на веб страницы медиа файлов (аудио, видео, флеша).
Сейчас мы живем в эпоху постепенного развития стандарта Html 5, когда для вставки видео и аудио появились специальные тэги Video и Audio, которые на данный момент не полностью поддерживаются всеми браузерами и существует еще неопределенность с используемыми кодеками (но они уже используются при верстке сайтов).
Однако, даже в будущей спецификации Html 5 элементы embed и object будут описаны, а значит имеет смысл уже сейчас изучить способы встраивания медиа контента на страницы сайтов с помощью этих тегов, которые будут на сто процентов работать в любом из лучших браузеров.
Embed и object — для чего они нужны и как работают
Вебстраницы создаются с помощью языка Html. Мы обрамляем имеющийся на ней текст (контент) соответствующими тэгами для его структуризации (создаем списки, таблицы, гиперссылки, вставляем изображения с помощью тега Img).
К этом документу подключаем файлы стилей CSS, которые будут управлять его внешним отображением (задавать цвет и фон через color и background, отступы и рамки через padding, margin и border, плавание в нужную сторону через float и clear, осуществлять позиционирование с помощью position, а также многое другое, что было мною описано в этом справочнике).
Ну, и третьей составляющей всех современных вебстраниц являются файлы сценариев JavaScript, которые способны добавлять документу дополнительный функционал, связанный с взаимоотношением с ним пользователя (загрузив страницу, посетитель может на ней что-то делать, например, заполнив Html форму регистрации или обратной связи, видеть сразу же результаты проверки правильности ее заполнения).
JavaScript взаимодействует не только с Html документом, но и с CSS. Мы с вами эту область вообще не затрагивали в силу ее достаточно большой сложности, да и большинство возникающих перед вебмастером вопросов уже давно решены и изобретать велосипед вам уже не придется (имеются готовые решения на JavaScript).
В новой версии языка гипертекстовой разметки Html 5, который пока что еще находится в стадии формирования (и еще довольно долго будет находиться), уже будет описан JavaScript, т.е. он фактически стал частью языка гипертекстовой разметки.
Очень многие возможности нового языка разметки Html 5 связаны именно с внедрением в него JavaScript. Все это завязано различными функциональными дополнениями, которые реализуются именно на нем. В общем, возможности пятой версии будут существенно отличаться от имеющихся в текущей версии языка, но когда это великолепие получит официальный статус и будет поддерживаться всеми имеющимися браузерами, пока неизвестно.
Элементы embed и object относятся к той же самой категории, что и изображения (img), и фреймы (Iframe), а именно — строчные элементы с замещаемым контентом (про строчные и блочные теги читайте в статье про CSS правило display).
Ведет себя такой элемент как строчный, но внутри него отображается посторонний внешний контент (картинка в случае Img или видео и флеш в случае Object или Embed). Любой из этих тэгов подразумевает наличие внешнего файла, который будет подгружаться в эту самую область, заданную атрибутами размера.
Т.о. получается, что на сегодняшний день весь медиа контент вставляется на сайты именно с помощью Img, Iframe, Object и Embed (строчных с замещаемым контентом). С помощью последних двух можно вставлять флеш и видео. Кстати, довольно интересно то, что их два и они по сути дублируют друг друга с небольшой разницей в синтаксисе написания. Как такое могло получиться?
Оказывается, что embed был разработан и использовался в браузере Netscape, про историю развития которого и его проигрыш в «войне браузеров» я уже писал в статьях про Мазилу Фаерфокс и Интернет Эксплорер.
Ну, а в это время ему была разработана альтернатива в виде Object. Однако скоро и первый вариант стал поддерживаться всеми популярными браузерами, хотя и не вошел в спецификацию Html 4.01 (т.е., по большому счету, Embed является не валидным, но тем не менее часто используемым), что и привело к некоему дуализму.
Итак, оба тега являются парными и на странице они фактически ничего не делают, а только задают область, в которую должно что-то загрузиться. Мне чаще всего приходится использовать их для вставки флеш баннера, который предлагает разместить мой очередной рекламодатель. Он представляет из себя файлик с расширением swf, который воспроизводится благодаря установленному почти у всех пользователей сети плагину Adobe Flash Player. Моя же задача заключается в том, чтобы показывать его в течении оговоренного срока в оговоренном месте моего блога.
Embed — невалидный тег используемый везде
Как я уже упоминал, у нас есть фактически два варианта реализации. Давайте начнем с элемента Embed, в котором вы должны будете обязательно указать два атрибута — Type и Src. Будучи уже прожженными знатоками Html, вы, конечно же, догадались, что с помощью первого атрибута мы должны будем указать тип подгружаемого медиа контента, а с помощью Src — задать путь до файла (в виде относительных или абсолютных ссылок) с этим самым медиа потоком.
Только так называемые MIME-типы объекта или, другими словами, Internet Media Types (т.е. условные обозначения типов объектов), которые возможно передавать по сети интернет. В нашем случае для флеша нужно будет указать тип «application/x-shockwave-flash»:
Таким образом можно с помощью Embed вставлять любые типы медиа файлов, например, все те же картинки в форматах jpg, gif, png или же видео (mp4, avi и др.). Нужно будет только указать соответствующий MIME-тип. Например, для изображений это может быть «image/jpeg», а для видео — «video/mp4».
Давайте для примера вставим с помощью Эмбед картинку в формате gif:
Ну, и видео попробуем вставить. Я взял вариант ролика про Apple Ipad 2 в формате Mp4, который мне довелось недавно получить на халяву от Профит Партнера (голос на ролике не мой, а сына, чтобы вы не усомнились в моей взрослости):
Вставленное таким образом видео имеет инструменты управления, с помощью которых можно ставить его на паузу, перематывать, отслеживать хронометраж и регулировать громкость звука. Но не во всех браузерах это будет отображаться.
Тег embed стопроцентно будет вставлять только флеш, который уже в свою очередь будет подгружать видеопоток.
Загружается небольшой ролик в формате SWF, который представляет из себя оболочку флеш проигрывателя с кнопками управления. А уже в него подгружается видео поток (обычно в формате Flv).
Вся работа по воспроизведению этого видео ложится на центральный процессор компьютера пользователя, а новый тэг из Html 5 для вставки видео (под названием video) будет существенным шагом вперед, т.к. позволит задействовать и графический адаптер компьютера для просмотра видео потока. Но тег video пока не будет однозначно работать во всех браузерах, в чем вы и можете наглядно убедиться:
Размер области, выделяемой под содержимое Embed браузером, выбирается произвольно, но вы вольны использовать все те же самые атрибуты, что и для Img, чтобы указать размер по ширине и высоте, а так же задать выравнивание через Align (хотя, тоже самое можно сделать и через CSS).
Касаемо флеша, информацию о дополнительных атрибутах тега Embed можно будет получить здесь.
Т.о. не смотря на то, что он не является валидным для версии Html 4.01 (но в версии 5 он уже будет присутствовать), Эмбед будет работать в любых браузерах (даже в старых IE).
Другое дело, что применение специальных атрибутов для управления видео (autostart, volume, loop) в браузере Google Chrome результата не дало, ибо ролик все равно стартовал автоматически и на максимальной громкости. Это сильно раздражает, поэтому я вставил видеоролик с помощью Video из арсенала Html 5, а не Embed. Возможно, что в других обозревателях будут проблемы с проигрыванием этого ролика.
Если у вашего браузера не будет модуля для обработки подгружаемого в этот тэг контента, то вы увидите об этом сообщение и предложение скачать нужный плагин. Разработчики обозревателей намерено не добавляют в свои детища все возможные модули, дабы не утяжелять программу.
Object и Param — вставка медиа контента
Однако, в спецификации Html консорциума WC3 описан другой элемент для вставки медиаконтента под названием Object. У него есть опять же два обязательных атрибута: type и data. Первый имеет точно такое же назначение, как и было описано выше, а следовательно в нем нужно будет использовать все те же MIME-типы. Ну, а Data служит для указания пути до файла с контентом.
Object тоже относится к строчным элементам с замещаемым контентом. Вставку флеша или видео с помощью этого тега можно осуществлять точно так же, как было описано выше. Правда, вместе с Object используется дополнительный одиночный тег Param, с помощью которого можно осуществлять настройки подгружаемого медиа контента.
В Param чаще всего применяется два атрибута: name и value. Для того, чтобы медиа контент нормально отображался в IE, нужно в Парам продублировать путь файла:
Кроме тегов Param внутри элементов Object можно использовать любой Html код с контентом (у меня для примера вставлено
), который будет показан пользователю на веб странице только в том случае, если вы укажите в Data неверный путь до файла с контентом (или он будет по каким-либо причинам недоступен). Ну, типа, альтернативного текста при выводе изображений.
Для того, чтобы урезать контекстное меню флеш файла (щелкните правой кнопкой мыши по часикам внизу и вверху этого абзаца), нужно добавить Param с соответствующими атрибутами и их значениями:
По текущей спецификации у Object имеется довольно много атрибутов, но большинство из них уже давно устарели и в спецификации Html 5 их уже не будет. Где взять значения для атрибутов Param в плане издевательства над флешем я уже приводил, но повторюсь.
Значения для него, в плане управления проигрывания видео, можно посмотреть здесь. Имеется возможность включения или отключения автозапуска, показа панели управления.
Embed и object войдут в будущую спецификацию Html 5, но, возможно, что их функции будут при этом каким-то образом разделены.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (12)
при быстрой перемотке страниц вверх или вниз- все часы едут,едет код,едет изображение
то ли хром не успевает, то ли еще рано такие тэги использовать
Я извиняюсь за свою глупость, но куда нужно вставлять все эти коды?
Алексей: ну, если у Вас статичный сайт, то в Html код нужной страницы, а если динамичный на движке, то либо непосредственно в статью через Html (визуальный) редактор, либо в файл шаблона WordPress, модуль Joomla или чего то еще подобное.
извиняюсь что не в тему но почему вы перестали ставить в начале страницы меню статьи связано ли это с продвижением и если да то какие последствия?
Игорь: да нет, просто статья небольшая.
70% текста просто выкинуть, ещё 20% порезать.
Статью хавать только роботам. За труды спасибо, но уж очень тяжело читать такой текст, в режиме перемотки схватил самое нужное.
Если такой умный, то иди на сайты для профессионалов и читай статьи, описывающие тему в двух словах.
Именно благодаря таким подробным текстам я наконец-то въехал в непонятные мне моменты.
Согласен с тем что несколько раздут текст и есть повторения и штампы. Но это не такая уж большая проблема и легко поправимая, говорю с точки зрения журналиста. Но огромный плюс в том что подробно описываются возможности HTML кода. В этой статье почерпнул для себя много нового. Спасибо автору за инфу и желаю в дальнейшем оттачивать свое перо.
Дмитрий все понятно по Embed и object. Непонятно как работать с аудиофайлами(МР3). Буду благодарен за пояснение
Ребят, надо понимать, что многие статьи на сайте приведены для внимания тех, кто желает въехать в тему по быстрому, либо вспомнить старое.
Если вы профи, и вас мало чем удивишь, то причина вашего нахождения тут не выдержит критики. А вот всем остальным этот ресурс очень нужен.
Подсажите, очень прошу, хоть и не совсем в тему. Нашла у себя в google.com/webmasters/tools в консоли во вкладке — «сканирование» — параметр «ver».Не помню, чтобы я этот параметр запрещала сканировать роботу, но он там стоит! Я посмотрела на Примеры недавно просканированных URL и вот что мне выдали:
Что это такое? Если перевести на язык «новенького».
Подскажите, есть ли инструменты, которые сканируют сайт и проверяют embed-объекты на адекватное отображение со временем?
Наш материал доступен выходит через поисковые системы, там есть посетители, но вместо цитаты и вставки embed кодом, у нас ничего не отображается. Следовательно, материал выглядит уже непривлекательно. Есть ли инструменты, которые бы помогли отслеживать такие удаления цитированных внешних материалов?
10 бесплатных HTML5 аудио/видео плееров для разработчика
С каждым днем мы все больше и больше слышим о HTML5. По мнению экспертов HTML5 — это будущее Интернета. В HTML5 есть очень интересные функции, например воспроизведение аудио-видео роликов.
Предлагаю вашему вниманию краткий обзор 10 бесплатных HTML5 видео плееров для разработчиков.
Plyr — простой, легковесный, кастомизируемый, доступный (accessible) HTML5 плеер для воспроизведения как аудио, так и видео контента.
Поддерживает популярные стриминговые платформы: YouTube и Vimeo. Работает во всех современных браузерах.
PlayerJS
Позволяет создать полностью свой плеер. Есть возможность управлять дизайном, настройками и рекламой в конструкторе плееров для сайтов PlayerJS. Используйте свободу выбора. В конструкторе есть все необходимые опции, чтобы создать свой плеер мечты.
MediaelEment.js
jPlayer
Это jQuery плагин для проигрывания аудио и видео. Поддержка форматов: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm.
MediaFront
Открытая бесплатная платформа (лицензия GPLv3) для внедрения плеера в веб-страницу, использует все новороты HTML5. Внедрение роликов с YouTube, Vimeo. Темы основаны на jQuery-UI ThemeRoller
jme — это HTML5 аудио/видео компонент с Flash и VLC Fallback, который сфокусирован на гибком интуитивно понятном DOM-API и семантичном коде.
FlareVideo
Flare — бесплатный HTML 5 видео плеер. Темы основаны на CSS/HTML/JS. Полностью открытый исходный код. Бесплатен для коммерческого использования.
Projekktor
Projekktor обертка для новых HTML5 аудио и видео элементов. Прост в интеграции (всего один JavaScript файл). Кроссбраузерный (IE, Opera, Chrome, Safari, Firefox и другие). Поддерживает внедрение рекламы в проигрываемый ролик. Использует свободный видеокодек Theora. Есть плейлисты. Показ роликов с YouTube. Темы основаны на HTML/CSS. Бесплатен для некоммерческого и коммерческого использования (лицензия GNU GPL)
Video JS
Что такое embed player
Unified jQuery interface to various audio/video players without dependency on their official JavaScript libraries. Currently supported players:
So you have an unified interface for all of these players and you don’t need to load the player APIs from the respective services (which is basically XSS).
Note: For Twitch players you need to pass the origin of the current host as an request parameter. E.g.:
YouTube also has this origin parameter, but it seems to be optional.
Embed player doesn’t provide an API for toggling a video to fullscreen because player APIs don’t provide a method for that. You can use the HTML5 fullscreen API to implement this feature yourself, though:
NOTE: The players do provide their own fullscreen buttons. Just adding your own will get you a situation where you can enter fullscreen twice and get situations that are very confusing to users. If you don’t set the allowfullscreen attribute on the iframe some players will still render a grayed out non-functional fullscreen button, which is still confusing. So maybe just let this be handeled by the players.
If the iframe is not loaded when the embed player is initialized any initialization message sent to the iframe will be lost. As I see it, it’s not possible to determine if an iframe is already loaded cross browser (Firefox does not implement iframe.readyState ).
Functions
Properties
Events
Initializes the embed. All other functions do this implicitely as well.