Создаем интерактивные HTML5 видео


Содержание материала:

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Тег video HTML5

Элемент

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

Пример кода тега

Пример добавления видеофайла при помощи тега :

Странно, Safari почему то не видит тега видео.

Автор ролика: Норвежская армия ,
Название: Garlem Shake .
Скачать файл можно c Яндекс.Диска : в формате OGG, в формате MP4,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb

Тег содержит в себе атрибут src=»http://html-5.ru/teg-video-html5″ , чьим значением выступает адрес хранения файлов мультимедиа.

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

Таблица поддержки браузерами видео кодеков и форматов

Каждый браузер поддерживает только определённые видео форматы, поэтому если вы хотите чтобы ваши ролики можно было просмотреть на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp4 , а другой с расширенеим .ogv

БРАУЗЕР/КОДЕК h.264 ogg/vorbis webm
Chrome 6+ да да да
FireFox 3.6+ нет да да
IE 9+ да нет нет
Opera 10.60+ нет да да
Safari 4+ да нет нет

У видео формата OGG/VORBIS , расширение файлов будет .ogv
У видео формата h.264 , расширение файлов будет .mp4

DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.

Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…

Атрибуты тега

autoplay=»autoplay» — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :)) .

controls=»controls» — создает панель управления видеофайлом, по умолчанию атрибут отключён.

height=» » — задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=» » .

w — задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=» » .

loop=»loop» — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

poster=»адрес» — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.

preload=»auto/metadata/ none » — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto — загружает видеофайл,
metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,
none — не загружает видеофайл.
Атрибут preload=» » не работает, если включен атрибут autoplay=» «

src=»http://html-5.ru/%D0%B0%D0%B4%D1%80%D0%B5%D1%81″ — указывает путь к видеофайлу.

В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.

Создаем интерактивные HTML5 видео

Элемент HTML5 уже поддерживается большинством современных браузеров, и даже IE поддерживает начиная с версии 9. Есть много преимуществ в том, что видео проигрывается в самом браузере без использования плееров сторонних производителей (см. статью Введение в HTML5 video Брюса Лоусона), поэтому многие разработчики пытаются начать использовать эту возможность как можно скорее. Но есть несколько препятствий к этому, в первую очередь, это проблемы с поддержкой кодеков в каждом браузере, тут разногласия между Opera / Firefox и IE / Safari. Но это не может быть серьезной проблемой в течение длительного времени, Google не так давно выпустил кодек VP8, и Opera, Firefox, Chrome и IE9 уже имеют поддержку этого формата, да и Flash также может проигрывать VP8. Это означает, что в скором времени мы сможем создать единую версию видео, которое будет проигрываться при помощи тега в большинстве браузеров и Flash Player.

Другим серьезным препятствием для использования является создание пользовательского HTML5 плеера — это то, где flash на данный момент единственное решение и в настоящее время имеет преимущество, с мощным IDE, Flash обеспечивает простой интерфейс для создания пользовательского компонента видеоплеера. Если мы хотим создать собственный плеер для элемента HTML5 , то мы должны писать все это на HTML5, CSS3, JavaScript и т.д.

И это то, о чем будет статья. Мы рассмотрим как создать легкий пользовательский HTML5 плеер, включая создание для этого простого плагина jQuery, выбор элементов управления и настройка внешнего вида при помощи CSS.

В этой статье мы рассмотрим:

  • Элементы управления видео
  • Основы разметки элементов управления
  • Создание плагина JQuery
  • Внешний вид плеера
  • Создание тем для плеера

Мы будем использовать jQuery для упрощения манипуляций DOM, и jQuery UI для создания ползунков управления, которые мы будем использовать для перемотки видео и изменения уровня громкости.

Элементы управления видео

Как профессиональные веб-дизайнеры, мы хотим создать видеоплеер, который будет выглядеть одинаково во всех браузерах. Однако, каждый браузер предоставляет свой собственный, по разному выглядящий, видео плеер, от минималистичного в Firefox и Chrome, до более навороченного в Opera и Safari (см. рисунок 1). Если мы хотим, чтобы наши элементы управления выглядели одинаково во всех браузерах, а также соответствовали нашему дизайну, мы должны создать наши собственные элементы управления с нуля. Это не так сложно, как кажется.

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

Все медиа-элементы в HTML5 имеют поддержку API медиа-элементов , к которому мы можем получить доступ при помощи JavaScript и использовать для создания таких функций, как воспроизведение, пауза и т.д. Элементы управления мы можем создать с помощью HTML, CSS, SVG.

Основная разметка элементов управления

Во-первых, нам нужно создать собственно саму разметку для элементов управления. Нам нужна кнопка Play/Pause, панель поиска, таймер и регулятор громкости. Мы вставим разметку для элементов управления после элемента , и обернем их в блок с классом ghinda-video-controls.

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

Создание плагина jQuery для плеера

После создания разметки, мы будет связывать наши элементы с API медиа-элементами, для того, чтобы управлять нашим видео. Как было отмечено выше, для этого мы напишем плагин jQuery.

Примечание автора: Я надеюсь, что вы знакомы с основами JQuery и JavaScript, поэтому я лишь вкратце объясню сценарий. Если вам нужна дополнительная информация по этим вопросам, см. Craig Buckler How to develop a jQuery plugin, и раздел JavaScript section of the Opera web standards curriculum.

$. fn . gVideo = function ( options ) <
// build main options before element iteration
var defaults = <
theme : ‘simpledark’ ,
childtheme : »
> ;
var options = $. extend ( defaults , options ) ;
// iterate and reformat each matched element
return this . each ( function ( ) <
var $gV >= $ ( this ) ;

//create html structure
//main wrapper
var $v >= $ ( ‘

Здесь мы используем jQuery для создания динамически разметки видеоплеера (но не сам проигрыватель), а также удаляем атрибут controls как только скрипт загружается. Это для того, что в случае, если пользователь отключил JavaScript, эти элементы управления будут бесполезны, и он/она не сможет воспользоваться нативными элементами управления браузера для элемента видео. Плеер будет использовать наши пользовательские элементы управления только после того, как скрипт успешно загрузился.

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

//get newly created elements
var $v >= $gV >parent ( ‘.ghinda-video-player’ ) ;
var $v >= $ ( ‘.ghinda-video-controls’ , $v >) ;
var $ghinda_play_btn = $ ( ‘.ghinda-video-play’ , $v >) ;
var $ghinda_v >= $ ( ‘.ghinda-video-seek’ , $v >) ;
var $ghinda_v >= $ ( ‘.ghinda-video-timer’ , $v >) ;
var $ghinda_volume = $ ( ‘.ghinda-volume-slider’ , $v >) ;
var $ghinda_volume_btn = $ ( ‘.ghinda-volume-button’ , $v >) ;

$v >hide ( ) ; // keep the controls hidden

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

Теперь для управления Play/Pause:

var gPlay = function ( ) <
if ( $gV >attr ( ‘paused’ ) == false ) <
$gV >[ 0 ] . pause ( ) ;
> else <
$gV >[ 0 ] . play ( ) ;
>
> ;

$ghinda_play_btn. click ( gPlay ) ;
$gV >click ( gPlay ) ;

$gV >bind ( ‘play’ , function ( ) <
$ghinda_play_btn. addClass ( ‘ghinda-paused-button’ ) ;
> ) ;

$gV >bind ( ‘pause’ , function ( ) <
$ghinda_play_btn. removeClass ( ‘ghinda-paused-button’ ) ;
> ) ;

$gV >bind ( ‘ended’ , function ( ) <
$ghinda_play_btn. removeClass ( ‘ghinda-paused-button’ ) ;
> ) ;

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

Для создания ползунка поиска мы будем использовать jQuery UI Slider component.

var createSeek = function ( ) <
if ( $gV >attr ( ‘readyState’ ) ) <
var v >= $gV >attr ( ‘duration’ ) ;
$ghinda_v >slider ( <
value : 0 ,
step : 0.01 ,
orientation : «horizontal» ,
range : «min» ,
max : v >,
animate : true ,
sl >: function ( ) <
seeksl >= true ;
> ,
stop : function ( e , ui ) <
seeksl >= false ;
$gV >attr ( «currentTime» , ui. value ) ;
>
> ) ;
$v >show ( ) ;
> else <
setTimeout ( createSeek , 150 ) ;
>
> ;

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

Далее мы создадим таймер.

var gTimeFormat = function ( seconds ) <
var m = Math. floor ( seconds / 60 ) 10 ? «0» + Math. floor ( seconds / 60 ) : Math. floor ( seconds / 60 ) ;
var s = Math. floor ( seconds — ( m * 60 ) ) 10 ? «0» + Math. floor ( seconds — ( m * 60 ) ) : Math. floor ( seconds — ( m * 60 ) ) ;
return m + «:» + s ;
> ;

var seekUpdate = function ( ) <
var currenttime = $gV >attr ( ‘currentTime’ ) ;
if ( ! seeksl >) $ghinda_v >slider ( ‘value’ , currenttime ) ;
$ghinda_v >text ( gTimeFormat ( currenttime ) ) ;
> ;

$gV >bind ( ‘timeupdate’ , seekUpdate ) ;

Здесь мы используем функцию seekUpdate, чтобы получить атрибут CurrentTime видео и функцию gTimeFormat для форматирования полученного текущего значения.

Для регулировки громкости, мы будем также использовать jQuery UI slider и пользовательскую функцию для кнопки регулировки громкости видео.

$ghinda_volume. slider ( <
value : 1 ,
orientation : «vertical» ,
range : «min» ,
max : 1 ,
step : 0.05 ,
animate : true ,
sl >: function ( e , ui ) <
$gV >attr ( ‘muted’ , false ) ;
v >= ui. value ;
$gV >attr ( ‘volume’ , ui. value ) ;
>
> ) ;

var muteVolume = function ( ) <
if ( $gV >attr ( ‘muted’ ) == true ) <
$gV >attr ( ‘muted’ , false ) ;
$ghinda_volume. slider ( ‘value’ , v >) ;

$ghinda_volume_btn. removeClass ( ‘ghinda-volume-mute’ ) ;
> else <
$gV >attr ( ‘muted’ , true ) ;
$ghinda_volume. slider ( ‘value’ , ‘0’ ) ;

$ghinda_volume_btn. addClass ( ‘ghinda-volume-mute’ ) ;
> ;
> ;

$ghinda_volume_btn. click ( muteVolume ) ;

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

Теперь, когда наш плагин готов, мы можем вызвать его для элемента video.

Этот код вызовет плагин для всех видео-элементов на странице.

Внешний вид

А теперь самое интересное, внешний вид видео плеера. Как только плагин будет готов, настройка элементов управления очень проста при помощи CSS.

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

Во-первых, мы добавим несколько стилей для основного контейнера видеоплеера.

.ghinda-video-player <
float : left ;
padding : 10px ;
border : 5px solid #61625d ;

-moz-border-radius : 5px ; /* FF1+ */
-ms-border-radius : 5px ; /* IE future proofing */
-webkit-border-radius : 5px ; /* Saf3+, Chrome */
border-radius : 5px ; /* Opera 10.5, IE 9 */

background : #000000 ;
background-image : -moz-linear-gradient ( top , #313131 , #000000 ) ; /* FF3.6 */
background-image : -o-linear-gradient ( top , #313131 , #000000 ) ; /* Opera 10.60 */
background-image : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0 , #313131 ) , color-stop ( 1 , #000000 ) ) ; /* Saf4+, Chrome */

box-shadow : inset 0 15px 35px #535353 ;
>

Мы указали float:left, чтобы не допустить его растягивания на всю ширину плеера, и чтобы ширина его была равна фактической ширине элемента видео.

Далее мы выстроим все элементы управления влево. Мы будем использовать opacity и transitions для Play/Pause и кнопки регулировки звука, чтобы создать симпатичный эффект при наведении курсора.

.ghinda-video-play <
display : block ;
width : 22px ;
height : 22px ;
margin-right : 15px ;
background : url ( ../images/play-icon.png ) no-repeat ;

-moz-transition : all 0.2s ease-in-out ; /* Firefox */
-ms-transition : all 0.2s ease-in-out ; /* IE future proofing */
-o-transition : all 0.2s ease-in-out ; /* Opera */
-webkit-transition : all 0.2s ease-in-out ; /* Safari and Chrome */
transition : all 0.2s ease-in-out ;
>

.ghinda-paused-button <
background : url ( ../images/pause-icon.png ) no-repeat ;
>

.ghinda-video-play :hover <
opacity : 1 ;
>

Я уверен, что вы внимательно прочитали первую часть статьи о JavaScript, и помните, что мы добавляли и удаляли классы для кнопки Play/Pause в зависимости от состояния видео (воспроизведение или пауза). Вот почему класс ghida-paused-button переопределяет свойство background класса ghinda-video-play.

Теперь бегунки. Как мы говорили раньше, мы используем jQuery UI slider для перемотки видео и регулировки уровня громкости. Этот компонент имеет свои собственные стили, определенные в jQuery UI stylesheet, но мы будем полностью переопределять их, для того, чтобы он соответствовал дизайну плеера.

.ghinda-video-seek .ui-slider-handle <
width : 15px ;
height : 15px ;
border : 1px solid #333 ;
top : -4px ;

-moz-border-radius : 10px ;
-ms-border-radius : 10px ;
-webkit-border-radius : 10px ;
-o-border-radius : 10px ;
border-radius : 10px ;

background : #e6e6e6 ;
background-image : -moz-linear-gradient ( top , #e6e6e6 , #d5d5d5 ) ;
background-image : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0 , #e6e6e6 ) , color-stop ( 1 , #d5d5d5 ) ) ;

box-shadow : inset 0 -3px 3px #d5d5d5 ;
>

.ghinda-video-seek .ui-slider-handle .ui-state-hover <
background : #fff ;
>

.ghinda-video-seek .ui-slider-range <
-moz-border-radius : 15px ;
-ms-border-radius : 15px ;
-webkit-border-radius : 15px ;
-o-border-radius : 10px ;
border-radius : 15px ;

background : #4cbae8 ;
background-image : -moz-linear-gradient ( top , #4cbae8 , #39a2ce ) ;
background-image : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0 , #4cbae8 ) , color-stop ( 1 , #39a2ce ) ) ;

box-shadow : inset 0 -3px 3px #39a2ce ;
>

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

.ghinda-volume-box <
height : 30px ;

-moz-transition : all 0.1s ease-in-out ; /* Firefox */
-ms-transition : all 0.1s ease-in-out ; /* IE future proofing */
-o-transition : all 0.2s ease-in-out ; /* Opera */
-webkit-transition : all 0.1s ease-in-out ; /* Safari and Chrome */
transition : all 0.1s ease-in-out ;
>

.ghinda-volume-box :hover <
height : 135px ;
padding-top : 5px ;
>

.ghinda-volume-slider <
visibility : hidden ;
opacity : 0 ;

-moz-transition : all 0.1s ease-in-out ; /* Firefox */
-ms-transition : all 0.1s ease-in-out ; /* IE future proofing */
-o-transition : all 0.1s ease-in-out ; /* Opera */
-webkit-transition : all 0.1s ease-in-out ; /* Safari and Chrome */
transition : all 0.1s ease-in-out ;
>

.ghinda-volume-box :hover .ghinda-volume-slider <
position : relative ;
visibility : visible ;
opacity : 1 ;
>

Когда курсор мыши наводится на кнопку регулировки громкости, её высота увеличивается при помощи transitions.

С базовыми знаниями CSS и некоторыми новыми свойствами CSS3, мы уже создали удобный интерфейс для нашего плеера, внешний вид его можно увидеть на рисунке 2:

Рисунок 2: Наш готовый видеоплеер.

Создание тем для плеера

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

Тема представляет собой совершенно новый свод правил CSS для каждого плеера. childtheme представляет собой набор правил CSS, который опирается на правила существующей темы, и добавляет или перезаписывает стили «родительской» темы.

Мы можем указать оба варианта или только один, при вызове jQuery плагина.

В приведенном выше примере мы вызываем плагин с темой smalldark. Сначала будет применяться родительская дефолтовая тема, а затем применится дочерняя тема поверх её, переопределив некоторую часть правил, установленных в родительской теме. См. рисунок 3 для темы Smalldark.

Вы можете проверить то что у нас получилось в действии, или скачать исходный код (8.5MB, ZIP-файл) и экспериментировать с ним дальше.

Заключение

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

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

html5 v > Ask Question

Does anyone know if html5 video allows objects like buttons, menu, etc connected to the timeline?

Youtube flash player do this: in specific moment, show an object (banner, links, comments) over the video for defined seconds.

4 Answers 4

Yes and no, It’s possible to create very interactive video-based presentations using html5 video objects however it requires a lot more than just the video object itself. You can nest video into a canvas object then mess with the actual video image frames, you can overlay any visual html element on top of the video object itself then animate these, you can control the video playback with buttons, click events etc. You can even have the video object control the rest of the page with time-based listeners.

Топ-пост этого месяца:  Что такое EPC в CPA и почему важно смотреть на этот показатель

Popcorn.js is really really good and easy to learn, allowing you to do all of what you mentioned. http://popcornjs.org

It’s not part of the HTML5 video standard, but it’s easy to implement manually by wiring up some scripting to the progress event. By looking at the currentTime property of the video object you can decide when to show/hide additional elements.

eg showing an element on top of a video between 1 and 2 seconds into a video:

X2TV (www.x2.tv) has a drag and drop studio where you can overlay icons and additional content within the HTML5 layer.

In case you woul like to use a more generic framework https://github.com/nise/vi-two could be interesting for you.

Not the answer you’re looking for? Browse other questions tagged html5 video or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.7.35374

Размещение видео с видео хостинга YouTube

Тяжело представить себе современный интернет без самого популярного видео хостинга YouTube, который по данным сайта alexa.com на конец 2020 года явлется вторым сайтом в мире по количеству посетителей! Речь в этой статье пойдет о том как с использованием языка HTML добавить видео контент c этого знаменитого видео хостинга на Ваши страницы.

Встраивание проигрывателя во фрейм

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

  • Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт Google и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
  • Запишите > элемента на вашей веб-странице (атрибуты width и height ). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла). Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения. Примечание из официальной документации: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
  • Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID). Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.

Давайте рассмотрим пример добавления видео с YouTube:

В этом примере элементом мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width ) и высоту 240 пикселей ( height ). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

  • autoplay = «1» (видео автоматически запускается).
  • loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
  • start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
  • color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Рис. 52 Добавление видео с YouTube во фрейм.

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео. Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться». После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку «Еще» и провести более расширенную настройку:

Рис. 53 Настройка фрейма на сайте YouTube.

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

Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder , который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen , который позволяет перевести плеер в полноэкранный режим. Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS».

8 бесплатных HTML5 аудио/видео плееров для разработчика

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

1. MediaelEment.js

2. jPlayer

Это jQuery плагин для проигрывания аудио и видео. Поддержка форматов: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm.

3. MediaFront

Открытая бесплатная платформа (лицензия GPLv3) для внедрения плеера в веб-страницу, использует все новороты HTML5. Внедрение роликов с YouTube, Vimeo. Темы основаны на jQuery-UI ThemeRoller

4. JME

jme — это HTML5 аудио/видео компонент с Flash и VLC Fallback, который сфокусирован на гибком интуитивно понятном DOM-API и семантичном коде.

5. FlareVideo

Flare — бесплатный HTML 5 видео плеер. Темы основаны на CSS/HTML/JS. Полностью открытый исходный код. Бесплатен для коммерческого использования.

6. Projekktor

Projekktor обертка для новых HTML5 аудио и видео элементов. Прост в интеграции (всего один JavaScript файл). Кроссбраузерный (IE, Opera, Chrome, Safari, Firefox и другие). Поддерживает внедрение рекламы в проигрываемый ролик. Использует свободный видеокодек Theora. Есть плейлисты. Показ роликов с YouTube. Темы основаны на HTML/CSS. Бесплатен для некоммерческого и коммерческого использования (лицензия GNU GPL)

7. Video JS

HTML5 видео плеер. Использует современные возможности браузеров. Бесплатен. Исходный код открыт. Легковесный. Не использует картинок. Скины задаются через CSS. Есть полноэкранный режим. В старых браузерах плеер автоматически заменяется на Flowplayer. Лицензия MIT.

Синхронизация контента с видео на HTML5

Одно основное отличие HTML5 от HTML4 заключается в том, что новые возможности превосходят ранее установленные рамки. HTML5 не ограничивается лишь текстом, ссылками, изображениями и формами, HTML5 предлагает мультимедийные средства, начиная от обобщенного элемента «object» до конкретизированных элементов «video» и «audio», а также богатого АПИ для доступа и работы с чистым кодом javascript.

Возможности родных мельтимедийных средств имеют некоторые преимущества:

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

* Конечным пользователям не нужно устанавливать дополнительные плагины.
У браузера уже есть всё нужное для работы с видео и аудио.

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

* Вы можете создавать собственные контроллеры используя HTML, CSS и javascript.
И при этом не требуется каких-то новых знаний в области разработки.

* Взаимодействие с остальными элементами страницы крайне простое.
АПИ мультимедии даёт вам полный контроль над видео, и вы также можете указать, что видео должно взаимодействовать с определенными изменениями, как на странице, так и в самом видео.

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

Это уже и не новость. Встроить видео теперь так же легко, как просто вставить элемент «video», и указать путь до видео-файла. Задав также атрибут контроллеров, вы получаете родное управление видео:

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

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

Конвертирование видео с помощью Miro Video Converter

Miro Video Converter – это бесплатный инструмент для Mac, который значительно упрощает процесс конвертации видео. Просто перетащите видео в приложение, выберите WebM в качестве выходного формата, и наблюдайте за процессом. Существуют и другие конвертеры , которые также работает в Windows и Linux.

Хостинг и автоматическая конвертация на Archive.org

Так как здесь все видео распространяются по лицензионному соглашению Creative Commons, то можно использовать Archive.org как для размещения видео, так и для его конвертации из WebM в MP4 и OGV. Просто загрузите видео-файл и подождите около часа. Перезагрузите страницу, и вы увидите, что Archive.org уже создал два других формата (а также прикольную GIF-анимацию с вашим видео).

Вы можете использовать Archive.org как для размещения видео, так и для его конвертации из WebM в MP4 и OGV.

Конвертация с помощью Vid.ly

WebM, OGV и MP4 работают почти во всех современных браузерах, но если вы хотите, чтобы видео также воспроизводилось на мобильных устройствах, планшетах, и вам хочется, чтобы качество видео подходило под пропускной канал пользователя, то вам нужно создавать огромное множество копий одного и того же видео-файла. Encoding.com посочувствовали нам, и выпустили бесплатный сервис под названием Vid.ly . Он конвертирует любое загруженное видео в различные форматы. К сожалению, пока что сервис находится в режиме приватного бета-тестирования, хотя вы можете воспользоваться пригласительным кодом: HNY2011.

Vid.ly конвертирует любое загруженное видео в различные форматы.

Более того, Vid.ly автоматически создает URL для вашего видео, и автоматически перекидывает пользователя с определенным устройством на соответствующий формат и качество. Это позволяет вам пользоваться встроенным кодом почти без забот:

Мощь АПИ HTML5 Video: Синхронизация контента

И так, наше видео уже на странице, теперь давайте проверим силу работы АПИ. Например, нам нужно узнать, какая часть видео проигрывается в данный момент. Это также просто определить, как подписаться на события элемента «video»:

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

Вы также заметите, что событие timeupdate часто слетает и всегда в разное время. Если вам хочется использоваться этим для синхронизации отображения и скрытия частей документа, тогда вам надо как-то с этим разобраться. Самый простой способ – это ограничить число полных секунд используя parseInt():

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

Для более подробного разбора этого демо, вам лучше ознакомиться с данной записью в блоге Mozilla Hacks.

Давайте попробуем нечто схожее: видео, которое отображает контент из веб-страниц ссылается на источник. Посмотрите это видео с объяснением того, что мы сейчас здесь делаем, того, как контент появляется и скрывается в определенные отрезки видео. Также не забудьте ознакомиться с контроллерами видео.

Мы уже выяснили то, как определить текущее время ролика в секундах. А далее мы хотим рассказать вам о том, как отображать и скрывать некоторые части веб-сайта в конкретных отрезках видео. Если видео не поддерживается браузером, то вам следует отображать всё содержимое без синхронизации .

Первое, что пришлось решить – это разрешить контролирование того, что и когда будет отображено. В целом, мы использовали объект JSON в javascript, и нами было замечено, что если использовать поддержку в самой разметке, то мы имеем больше гибкости.

HTML5 позволяет вам размещать информацию в атрибутах data-. Так что, для облегчения контроля над скриптом, мы просто воспользуемся атрибутами data-start и data-end, которые определяют временные рамки для статей, которые мы хотим синхронизировать с видео:

Вы можете опробовать это, скачав код и изменив значения по собственному усмотрению (или использовать Firebug или Web Inspector, чтобы можно было всё сделать на лету).

Вот скрипт (использует jQuery), который помогает реализовать то, что нам нужно:

Итак, что же здесь происходит? Для начала, мы проверяем, может ли браузер проигрывать HTML5 video, тестируя атрибут canPlayType. Если здесь всё в порядке, то добавляется небольшой объясняющий текст документа (который не появится, если браузер не может воспроизвести видео). Далее, мы определяем некоторые переменные для использования и добавления класса javascript к родительскому элементу документа. Это, в купе с селектором статей .js в CSS, прячет все статьи в документ.

Далее мы прокручиваем статьи, и определяем временные рамки от начала до конца каждой из секций, и сохраняем их в строке под названием timestamps.

Далее мы подписываем событие timeupdate, которое включает в себя полный объем секунд, и каждую секунду вызываем функцию showsection().

Функция showsection() проходит по всем временным отметкам и проверяет, находится ли текущий момент видео в пределах какой-либо из статей. Если да, то статья отображается (посредством добавления текущего класса), а все остальные спрятаны. Это может быть оптимизировано за счёт сохранения текущей секции и удаления класса из конкретного элемента.

Можно ли сделать то же самое с меньшим объемом кода или вообще без него?

Если вам нравится идея синхронизации видео с контентом, то попробуйте ознакомиться с платформой Popcorn . Она основана на той же технологии, но даёт вам гораздо больше контроля над самим видео.

Есть другая система, Butter , где самая суть заключается интерфейсе типа «point-and-click». Здесь есть красивый редактор временной шкалы, который позволяет вам проигрывать видео и отображать любой тип веб-контента в конкретный отрезок времени. Вы можете экспортировать и отсылать свои творения друзьям.

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

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

Все эти технологии дают нам огромные возможности, но мы всё ещё не можем воспользоваться простеньким кодом CSS, javascript и HTML, чтобы всё заработало как надо. Если мы хотим, чтобы эти технологии развивались, нам нужно сделать их простыми для людей. Следующий этап на сегодняшний день заключается в том, чтобы отойти от текущей фазы и подумать о создании инструментов с системой пошаговой разработки кода для пользователей, кто хочет пользоваться этими самыми технологиями, но у кого не так много времени на изучение специальных языков программирования.

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

Также советуем вам ознакомиться с видео о синхронизации контента с HTML video в блоге Mozilla Hacks.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

ВИДЕОУРОК №3. HTML5 формы. Теги video и audio.

Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 9.99 USD

Поддержка браузерами форм и HTML5

Основные типы элементов формы

Атрибуты required и autofocus

Пример проверки достоверности ввода

Использование библиотеки modernizr

Воспроизведение аудио с помощью JavaScript

Основные функции и свойства медиа-элементов

Воспроизведение видео с помощью JavaScript

Пройдите тестирование по данному уроку. У вас есть три попытки на урок

HTML5 и CSS3 Essential
HTML5 формы. Теги video и audio.

Количество вопросов: 5
Время на тестирование: 5 минут

Кандидат: <>
Дата сдачи: <>
Правильные ответы: <> из 5
Время, потраченное на тест: <>

Здравствуйте. Тема сегодняшнего урока: работы с формами, а также видео и аудио элементами. Наш урок будет разбит на 2 части. В первой части мы рассмотрим какие новые элементы и атрибуты будут появились для создания форм, для валидации данных, которые пользователь вводит в формы, а во второй части урока мы научимся создавать страницы, которые умеют воспроизводить аудио и видео записи. Давайте перед тем как приступить к рассмотрению презентации, откроем с вами браузер и зайдем на один из сайтов, которые мы разбирали с вами на прошлом уроке, сайт позволяющий проверить поддержку некоторой функциональности в разных браузерах. Заходим на сайт caniuse.com и первая тема, которую мы разбираем, это формы. Давайте мы в поиске введем form и посмотрим на результаты которые выдает нам поисковик. HTML5 form features, видите что картина не очень хорошая, в большинстве браузеров поддержка форм, элементов форм еще не до конца реализована. Если посмотреть на легенду, вы увидите такой грязно зеленого цвета элемент в диаграмме, который означает, что браузер имеет частичную поддержку функциональности. На самом деле если мы посмотрим на show all versions, посмотрим на все версии браузеров, которые у нас здесь зафиксированы, то увидим что поддержка HTML5 форм хорошо реализована в браузере опера, начиная с 9-той версии опера полностью поддерживает все возможности, которые анонсированы с появлением HTML5. Ну вот последняя версия, она частично поддерживает формы HTML5. Что имеется ввиду под частичной поддержкой. Вы увидите, что сейчас я открыл фаерфокс и указано, что не важно от версии этот браузер частично поддерживает форму. Что означает частичная поддержка форм? Давайте мы перейдем на другой сайт, который тоже разбирали на прошлом занятии, это сайт HTML5test.com и в открывшемся окне мы с вами посмотрим немножко ниже по странице и найдем блог, который отвечает за элементы HTML5. Если мы посмотрим на вторую колонку, которая указывает поддерживает браузер возможности или не поддерживает, то мы увидим что половина функций в фаерфоксе не поддерживается, в половине пунктов везде стоят крестики.

Давайте посмотрим какая картина в браузере опера так как сайт caniuse.com сказал, что опера имеет полную поддержку, это не обновленная опера, версии 12, поэтому здесь мы можем зайти по адресу HTML5test.com и можем увидеть, что опера полностью поддерживает формы. Если фаерфокс у нас набрал 61 из 115, то в опере у нас все 115 баллов набраны и вы видите, что напротив всех элементов у нас стоят галочки. Получается, что опера у нас лучше всех поддерживает HTML5 формы. Если вы начинаете тестировать какую то функциональность HTML5 форм, если вы хотите увидеть как работает та или иная конструкция в разметке вашей страницы, то для того чтобы точно быть уверенными, что разметка будет функционировать, попробуйте открыть свою страницу в опере. Опера лучше всего поддерживает формы. Остальные браузеры имеют достаточно большой разброс. Некоторые поддерживают одни элементы, некоторые – другие. Мы с вами на сегодняшнем уроке посмотрим, как можно сделать так, чтобы даже если браузер не знает о некотором элементе HTML5 форм, он мог заменить этот элемент кодом java script, чтобы в любом случае функциональность была предостаточной, чтобы пользователь мог нормально взаимодействовать с формой.

Теперь давайте перейдем к презентации и посмотрим первые 2 слайда. На этих слайдах мы еще раз посмотрим на те браузеры, которые поддерживают HTML5 формы. Эти слайды вы можете использовать для того чтобы проверять какой именно браузер поддерживает тот элемент, который вы собрались добавить к себе на страницу. Видите, что на первом слайде у нас перечислены HTML5 элементы, слева в строчках, а каждая колонка определяет определенную версию браузера в которой определенный HTML5 поддерживается или поддерживается частично. На следующем слайде у нас показаны HTML5 атрибуты. Точно так же, перечень атрибутов и версия браузеров, начиная с которых вы можете эти атрибуты использовать. Сейчас в примерах мы с вами разберем элементы и атрибуты и увидим значение и то, как они работают. Первые 2 слайда можете использовать как справочники. Давайте теперь перейдем в Visual Studio и вначале мы рассмотрим с вами формы и элементы форм вообще. Не HTML5, а которые использовались ранее, а потом начнем с вами разбирать как работают HTML5 элементы и атрибуты. В первом файле мы разберем с вами все инпуты, которые вы можете применять. Для начала давайте обсудим, для чего нужен элемент form. Элемент input вы можете размещать в любой части страницы. В первую очередь этот элемент нужен для того, что бы пользователь мог предоставить некоторые данные, провести какой-то выбор, после чего данные могли быть отправленными на сервер. Если вы собираетесь разработать страницы для авторизации, регистрации или другую страницу, требующую от пользователя ввода. Вам нужно будет на странице разместить элемент form, а в этот элемент набросать уже необходимые элементы управления. Сам по себе элемент form нужен для того, что бы все инпуты которые в нем находятся, могли быть отправленными на серверную сторону. В этом уроке мы с вами не разбираем как работает серверная сторона и не рассматриваем, как нужно правильно конфигурировать элемент form. Если его корректно настроить, то в нем должен быть определен еще атрибут action где будет определена страница на стороне сервера, которая будет принимать данные, введенные пользователем. И так же мы можем указать атрибут method, в котором будет указан http глагол, с которого данные будут отправлены на сервер. Если мы строку настроим вот таким образом, укажем 2 атрибута, это будет значить что все инпуты, все значения, которые находятся в этой форме, они будут отправлены на страницу test.aspx , с помощью глагола post. Страница сможет прочитать все значения, которые находятся в инпутах и что то с этими значениями сделать. Например добавить пользователя в базу данных или проверить пользователя и выделить пользователю специальные куки, что бы пользователь считался авторизированным на сайте. Вот как будет выглядеть полная настройка формы. Но пока мы свое внимание сконцентрируем на клиентской стороне и рассмотрим как настраивать саму форму, как настраивать ее содержимое. Форма в себе может содержать любую HTML разметку, но если мы создаем форму, то в любом случае в форме будет несколько инпутов. На 9 строке у нас создается первый input, если вы его определяете, то для него вам необходимо установить несколько атрибутов. Первый атрибут – type, который будет указывать сто именно из себя представляет input. Второй атрибут – name, который необходим для того, что бы на стороне сервера код, который будет читать информацию из полученных данных, со стороны клиента, мог к чему то привязаться, то есть на сторону сервера при отправке данной формы, будет уходить набор ключей и значений, привязанных к этому ключу. Вот получается name это ключ, а value – значение, привязанное к этому ключу. Дальше мы постараемся рассмотреть, как этот функционал будет работать, для чего нужно 2 эти атрибута. В атрибуте type, мы определяем как именно будет работать элемент и в первых примерах мы разберем какие новые элементы атрибута HTML5, появились в HTML5. Если мы удалим значение button в visual studio и нажмем комбинацию клавиш ctrl+пробел, то нам покажут возможные значения для атрибута HTML5. Если мы создаем вот такой вот элемент ввода, он превращается в обычную кнопку. Для этой кнопки не задается никакого поведения. Если мы хотим, что бы при нажатии по кнопке что нибудь происходило, нам нужно добавить java script код. Иначе эта кнопка просто будет бездействовать. Следующий элемент, это элемент с типом checkbox. Давайте посмотрим как будет выглядеть этот контрол. Первый контрол у нас кнопка, второй контроль checkbox. Если мы поставим галочку, то тогда пойдет на сервер значение, что имя со значением true, если мы галочку снимем, то на сервер никакие данные отправляется не будут. Так же мы можем задавать атрибут как checked=checked. Это будет указывать, что элемент при загрузке страницы, должен быть выбранным. Видите, сейчас при загрузке страницы галочка снята, если мы страницу перезагружаем, то вы видите, что галочка у нас автоматически устанавливается. Следующий элемент, который у нас показан в разметке, вы видите у нас есть кнопка browse и сообщение selected. Если мы кликаем по этой кнопке, у нас открывается окно, к котором мы можем выбрать файл и отправить на сервер. Для того что бы сделать такого рода элемент ввода, нам нужно задать input и определить для него type = file. На сервере, используя имя file 1, мы сможем получить доступ ко всем байтам файла, который здесь выбран. Следующий элемент, это элемент h >

Теперь давайте посмотрим на HTML5 атрибуты и элементы. Во втором примере показан элемент с типом search. Если мы создаем вот такой элемент ввода, то отображается он в браузере как обычный текстбокс, но при получении данных этот текст бокс добавляет в правом углу крестик, по котором можно удалить текст, находящийся в текстбоксе. Для того что бы внести новый элемент ввода, для того что бы вводить поисковые фразы, у вас есть возможность быстро удалить все содержимое, которое вы вводили для поиска. Но если мы откроем пример в гугл хром, то введя текст у нас пояится крестик, кликнув по которому мы очистим текстовое содержимое. Для мобильных телефонов это очень удобный элемент ввода. Для того, что бы легко удалить содержимое, нам достаточно нажать на крестик. В браузере мы легко можем выделить весь текст и удалить его. Вот первый элемент, который мы разсмотрели в HTML5 формах. Так же в этом примере показано использование элемента label, если вы создаете форму, то старайтесь что бы текст, который привязан к элементам управления был не просто текстом, который вы определили на странице, а текстом который помещен в элемент label. Если вы создаете элемент label вот таким вот способом, определяете его и помещаете и текст и элемент ввода, это будет означать, что когда вы загружаете страницу, если вы кликаете по тексту, то сразу же получаете фокус в элемент ввода. Если вы не хотите, что бы input находился непосредственно в label, вы можете провести вот такую настройку, вы можете label вынести выше, сказать что он предназначен для элемента search и этот в обработчике на событие onclick, запускается функция generatepreview. И есть видео эелемент с высотой, шириной, стилем, что бы мы видели этот элемент на странице. Айдишник у этого элемента orig video. Строка 19-20 мы создаем 2 элемента canvas. Эти элементы имеют id previewmed и previewsm. Мы будем брать вот это видео, которое воспроизводится и дублировать его в первый и второй canvas. Это непосредственно область, где мы можем рисовать растровую графику. Теперь смотрите как работает функция generatepreview. Первое что мы делаем, это находим видео элемент по айдишнику. Вторая операция, мы находим первый canvas. Для того что бы получить доступ к канвасу и начать на канвасе отображать какие либо данные, нам нужно использовать функцию getcontext. Нужно получить контекст, с помощью которого будет воспроизводится рисование. Конекст мы получаем с параметром 2D, потому что мы стараемся рисовать двумерное изображение. Получив эту переменную мы будем ею пользоваться для того, что бы изменять значение в канвасе. То же самое мы делаем для второго канваса. Находим вначале эелемент, а потом извлекаем контекст. Самыйе важные переменные, это переменные контексты, в которые мы будем производить изменения в канвасе. Теперь 35, 37 строчка, мы задаем канвас размеры. И ниже на 41 строчке мы добаляем обработчик события начала воспроизведения видеозаписи. Мы берем элемент выдео. Мы вешаем в качестве обработчика функцию, запускающую еще одну функцию drawvideo. В эту функцию передается параметр this, это по сути ссылка на элемент видео в котором находится обработчик. Context1 и context2 это контекст, который мы получили получили из канвасов и которыми мы будет пользоваться при рисовании превьюшек. Сама функция на 49 строчке принимает 3 аргумента. Первое — проверяем не остановлено ли видео и не завершилось ли оно. Если хотя бы одно из этих значений будет true, то мы прекращаем воспроизведение и делаем return false. Если же видео еще не остановилось или не закончилось, то строка 57. Мы на канвасе1 рисуем изображение, это функция drawimage, предначзначена для того, что бы копировать картинки на канвас. Мы выдим что картинка которую мы рисуем, это будет элемент видео. Иуказываем размер этой картинки, которую мы хотим скопировать в канвас. Получаеться благодаря этим двум функциям, мы элемент видео переносим на канвас. Так как у нас видео постоянно воспроизводится, нам нужно постоянно делать копирование новых кадров, которые есть в видеоэлементе, по этому на 63 строчке мы запускаем функцию settimeout. В качастве первого параметра указываем функцию drawvideo. Каждые 25мс мы планируем запуск drawvideo, функция запускается и еще раз планирует свой запуск. И так у нас будет происходить до тех пор, пока мы не попадем в эту область и не закончится воспроизведение звуковой дорожки. А когда мы планируем запуск функции через интервал, мы указываем параметры которе нам попали в качестве аргумента. Просто повторно запускаем с периодичностью в 25мс. Вот такой пример, показывающий как можно пользоваться канвасом и совмещать канвас с видео. И последний пример, относящийся к видео это пример который показывает как можно контролировать то место, с которого мы начинаем воспроизведение видео. Если мы запусти 9 пример, у нас есть кнопка play pause, которые запускают и останавливают видео и кнопки 1.2.3, позволяющие воспроизвести первую, вторую и третюю часть видео. Нажимаем play, и нажимая на эти кнопки мы переходим на соответствующие части видеозаписи. Как этот код у нас реализован. Точно так же опередел элемент видео, есть несколько кнопок. У каждой кнопки есть свой айдишник, который привязан с java script кодом. На строке 39 мы указываем, что хотим запустить функцию когда данное окно будет загружено. Функция, которая будет запускатся найдет элемент видео и строка 31 расчитает какая продолжительность 1/3 данного видео. Теперь то что касается аудио и видео кодеков. Вы заметили что в данных примерах, когда мы создаем либо видео либо аудио элемент, мы определяем несколько элементов source. С помощью различных програмных продуктов вы можете создавать медиаконтент, используя кодеки. Один из вариантов, как вы можете подготовить для себя файл с различными форматами, это использование проигрывателя, который называется vlc. Вы можете указать какой файл вы собираетесь конвертировать. Вот наши файлы, которые мы смотрели в предидущих примерах. Нажимаем на кнопку convert. проигрватель показывает какой файл он собирается конвертировать. Мы указываем, где мы хотим сохранить файл. Далее у нас есть набор настроек. Если мы создаем видео, мы можем использовать 2 кодека, создать mp4 файл, в котором находится видео в формате H264 и звук в формате mp3. Мы можем имея 1 файл, получить все необходимые для воспроизведения форматы и использовать для себя в приложении. На этом мы заканчиваем урок, посвященный формам и воспроизведение медиафайлов, спасибо за внимание. До новых встреч.

интерактивное видео с html5

Я новичок в программировании на языке ActionScript. Я знаю некоторые html, и сейчас я изучаю html5. Мне нужно сделать интерактивное видео, помещая контент html в определенное время видео. Я буду более кратким:

Например, у меня есть видео длиной 5 минут, допустим, что со второго 3:50 до 4:00 мне нужно отобразить два окна над видео, каждый из которых представляет один выбор. Если в 3:50 видео показывает возможность для зрителя выбрать один из двух путей (видео сказал пользователю, чтобы выбрать среди этих путей, например), зритель будет иметь возможность выбрать один из путей, нажав на один из два поля, которые появятся в этом интервале времени. Я знаю, что это нужно делать с тегом и с гиперссылками.

Мой вопрос: Как сообщить игроку html5 отображать холст с минуты 3:50 до минуты 4:00, в котором будут отображаться две гиперссылки?

Благодарим за внимание. Я очень благодарю вашу помощь. Мне нужно какое-то руководство, потому что я искал много дней.

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

Используя видеопроигрыватель html5 для поиска в другое время в видео (используя currentTime), вы можете создать событие щелчка на поле, которое вы кладете поверх видео, и установить время, когда вы нажмете на это поле, используя:

Вы можете проверить, как мы создали инструмент для создания интерактивного видео (open source) с использованием html5 и JS и использовать его.

Если вы не хотите тратить время на кодирование интерактивного видео, вы должны проверить инструмент разработки H5Ps на этом простом примере. Вы также можете проверить свои собственные на H5P.org. Инструмент полностью свободен.

Возможно, я ошибаюсь, но я считаю, что вы имеете в виду javascript вместо actionscript. Если это так, то я определенно проверил бы это Video.JS. Когда вы достигнете текущего времени, вы запускаете свой метод/функцию, которая добавляет все, что вы хотите, поверх видео.

var whereYouAt = myPlayer.currentTime();

Однако, если вы имеете в виду ActionScript, то вы работаете с флэш-плеером. Поэтому я предлагаю вам взглянуть на этого Vimeo Player

currentTime: Number [только для чтения] Возвращает текущее время воспроизведения видео.

Управление HTML5-плеером с помощью JavaScript

Веб-программирование — HTML5 — Управление HTML5-плеером с помощью JavaScript

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

Создание своего видеопроигрывателя

Любому видеопроигрывателю требуется базовый набор кнопок управления воспроизведением. Стандартные кнопки управления воспроизведением проигрывателя создаются следующим кодом:

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

Это замечательная возможность для ускоренного просмотра медленных видеоинструкций. Аналогично, при значении playbackRate равном 0.5 видео проигрывается со скоростью, составляющей половину нормальной скорости. При значении playbackRate равном -1 видео должно проигрываться с нормальной скоростью, только в обратном направлении, но браузеры сталкиваются с проблемой реализации этого режима должным образом. Код для реализации этих функций следующий:

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

Индикатор хода воспроизведения является примером ситуации, идеально подходящей для использования элемента

. Но уровень браузерной поддержки элемента

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

Далее приведены правила таблицы стилей, которые устанавливают размер индикаторов и окрашивают их в соответствующие цвета:

В процессе воспроизведения элемент постоянно активирует событие onTimeUpdate. Реагируя на это событие, обновляем индикатор хода воспроизведения:

А этот код получает от свойства currentTime значение текущей позиции в видео, разделяет его на общее время (свойство duration) и преобразует результат в процентное значение, которое используется для установления размера div-элемента postitionBar:

Можно сделать индикатор выполнения немного замысловатей, добавив индикатор загрузки, показывающий объем содержимого, загруженного и помещенного в буфер в данный момент. Эта возможность уже имеется в проигрывателях, встроенных в браузеры. Чтобы добавить этот индикатор, нужно обрабатывать событие onProgress и работать со свойством seekable. Дополнительную информацию о свойствах, методах и событиях элемента смотрите на странице msdn.microsoft.com/ru-ru/library/ff975073.aspx.

Проигрыватели на JavaScript

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

К счастью, для веб-дизайнеров, блуждающих в поисках идеального HTML5-проигрывателя, имеется лучший вариант. Вместо того чтобы разрабатывать мультимедийный проигрыватель самому, можно взять бесплатный, настраиваемый посредством JavaScript проигрыватель в Интернете. Два из них — это VideoJS и, для фанатов библиотеки jQuery — jPlayer. Оба проигрывателя легковесные, удобны в использовании, а также имеют функцию смены скинов с помощью таблицы стилей. Например сервис VideoJS позволяет создать вручную скин медиаплеера:

Большинство проигрывателей мультимедиа на JavaScript (включая проигрыватели VideoJS и jPlayer) содержат встроенные резервные решения Flash, что позволяет разработчику сэкономить время и усилия на поиски отдельного Flash-проигрывателя. А проигрыватель jPlayer имеет удобную функцию создания списка воспроизведения, позволяющего выбрать для проигрывания или просмотра несколько файлов.

Чтобы использовать VideoJS в своих разработках, сначала загрузите его JavaScript-файлы с веб-сайта проигрывателя. Потом вставьте ссылку на его сценарий и таблицы стилей, как показано в следующем коде:

Затем используется обычный элемент с несколькими элементами и резервным решением Flash. (Для резервного Flash-решения в проигрывателе VideoJS используется Flowplayer, но его можно удалить и использовать другой Flash-проигрыватель.) По сути, единственная разница между обычной страницей HTML5 и страницей с проигрывателем VideoJS состоит в том, что в последней нужно использовать специальный класс в элементе :

Введение в HTML5 видео

Эта статья даст вам представление об элементе и его API. Мы объясним, почему поддержка видео в браузерах так важна, сделаем обзор элемента video в HTML5 и рассмотрим самые важные способы управления воспроизведением видео с помощью JavaScript.

Много лет тому назад понятие мультимедиа в веб связывалось с MIDI-мелодиями и GIF-анимацией. Благодаря увеличению пропускной способности каналов связи и улучшению технологий сжатия данных MP3 вытеснил MIDI, а видео стало распространяться повсеместно. За право захватить нишу веб-мультимедиа соревновались многие запатентованные продукты — Real Player, Windows Media Player и другие — пока один из них не вышел победителем в 2005 году — им был Adobe Flash. Это произошло во многом благодаря широкому распространению этого плагина, а также тот факт, что Flash-технология стала выбором YouTube; Flash стал фактически стандартом для передачи видео в Интернете.

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

Эта статья даст вам представление об элементе и его API. Мы объясним, почему поддержка видео в браузерах так важна, сделаем обзор элемента video и рассмотрим самые важные способы управления воспроизведением видео с помощью JavaScript.

Зачем нам нужен элемент ?

До сегодняшнего дня если вы хотели вставить видео на страницу, вам пришлось бы разрываться между несколькими вариантами разметки. Ниже помещен пример, взятый непосредственно с сайта YouTube:

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

Анатомия элемента

По сравнению с запутанными конструкциями, которые необходимы для вставки Flash на страницу, базовая разметка тега в HTML5 удивительно проста:

Заметьте, что в нашем примере мы используем нестрогий синтаксис HTML5 — вы не обязаны ставить кавычки вокруг значений атрибутов и можете использовать простые булевы атрибуты, такие как AutoPlay как отдельные слова. Если вы хотите, вы, конечно, можете придерживаться синтаксиса XHTML control=»control» и заключить в кавычки все значения атрибутов. Очевидно имеет смысл выбрать свой стиль кодирования, который вам больше подходит и придерживаться его для единообразия и удобства. В XHTML5 вы должны использовать синтаксис XHTML (а также создавать страницы в виде XML с правильным MIME-типом, который в настоящее время не работает в Internet Explorer).

Предназначение атрибутов элемента , использованных в нашем примере, очевидно:

src Источник видео, URL видео файла. width и height Также как и для элемента img , вы можете явно указать размеры видео — иначе будут использованы внутренние высота и ширина самого видео файла. Если вы укажите только один атрибут из двух, браузер изменит размер видео в соответствие с этим значением, сохранив соотношение сторон. controls Если этот атрибут установлен, то браузер отобразит элементы управления видео. Если же атрибут не указан, пользователь увидит лишь первый кадр (или указанное изображение poster ) и не будет иметь возможности воспроизвести видео, пока вы не запустите видео с помощью JavaScript или не создадите собственные средства управления, о чём мы расскажем далее в этой статье. poster Атрибут poster указывает на изображение, которое браузер будет показывать, пока загружается видео, или пока пользователь не начнёт воспроизведение. Если этот атрибут не указать, то вместо него будет показан первый кадр видео.

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

Итак, можете проверить, как работает видео в HTML5 в нашем примере с турецкими танцами.

Существует и другие атрибуты, о которых мы ещё не упомянули:

autoplay Если указать этот атрибут, то браузер начнёт воспроизведение видео автоматически. Используйте его с осторожностью, так как это может быть крайне неудобно для пользователя, например, если у него низкая скорость соединения (или мобильный телефон). autobuffer Если вы уверены, что пользователь захочет просмотреть видео, но вы не хотите использовать autoplay , вы можете установить атрибут autobuffer . Это заставит браузер начать загрузку видео после завершения загрузки страницы. (Эта часть спецификации в настоящее время находится в интенсивной разработке и может измениться; поэтому этот атрибут не реализован в Opera 10.5 beta) loop loop — атрубут типа boolean, позволяющий воспроизводить видео циклически. (В настоящее время не реализован в Opera 10.50 beta)

Кодеки — ложка дёгтя в бочке мёда

Opera поддерживает видео-кодек Ogg Theora: Theora — бесплатный и открытый видео-формат от Xiph.org Foundation, он может использоваться для распространения фильмов и видео онлайн и на дисковых носителях без лицензионных ограничений.

Firefox и Chrome также поддерживают кодек Theora. Однако, Safari его не поддерживает, предпочитая кодек H.264 (который также поддерживает и Chrome). Поэтому нам придётся конвертировать видео дважды, сначала в формат кодека Theora, а затем и в H.264, добавляя дополнительные элементы с соответствующим атрибутом type к видео на веб-странице, тем самым позволяя веб-браузерам загружать тот формат, который они могут воспроизвести. Заметьте, что в таком случае мы не снабжаем атрибутом src сам элемент :

Пример с использованием двух источников видео — .ogv и .mp4, который должен работать во всех браузерах, поддерживающих HTML5 видео, независимо от поддерживаемого кодека.

На момент написания этой статьи (февраль 2010-го) представители Microsoft не сделали официального заявления о том, какой видео-кодек они будут поддерживать (если вообще будут). Однако, тип файла MP4 может быть также воспроизведен с помощью плагина Flash, так что они могут использоваться совместно в качестве обратной связи для Internet Explorer и старых версий других браузеров. Ознакомьтесь с реализацией этого метода в статье Kroc Camen «Видео для всех!», в которой он добивается объединения элементов object и embed с новым элементом.

Конечно, если браузеры, не поддерживающие элемент , попробуют использовать плагины Quicktime или Flash, на самом деле мы вернемся к тому, с чего начали и не получим никакого преимущества от новых возможностей и усовершенствований, которые мы описали чуть выше. «В чём тогда смысл?», — спросите вы. А мы можем ответить, что это переходное решение, пока поддержка нового видео элемента не появится в большинстве браузеров.

Больше нет второсортных жителей в Веб

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

Главное преимущество элемента заключается именно в том, что он —полноценный житель в Веб, по сравнению с жителем окраин object или не проходящим валидацию элементом embed (хотя сейчас он её проходит в HTML5).

Проблемы управления с помощью клавиатуры

Одна из больших нерешенных проблем использования Flash — недоступность управления воспроизведением с клавиатуры. За исключением Internet Explorer на Windows не существует способа взаимодействовать с Flash-роликом посредством клавиатуры. И даже если пользователи каким-то образом могут переместить фокус на Flash-ролик, не существует простого способа вернуться обратно на страницу (если только это не предусмотрено в самом Flash-ролике с помощью программирования на ActionScript). В отличие от этого, браузер полностью отвечает за элемент , он может управлять воспроизведением видео и включать кнопки управления в стек табуляции.

Поддержка клавиатуры в HTML5 видео в настоящее время не реализована во всех браузерах. однако, она уже работает в бета-релизе Opera 10.50.

хорошо взаимодействует с остальной частью страницы

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

Обычно в этом нет никакой проблемы, но они могут возникнуть, когда ваша разметка перекрывает область с плагином. Например, представим себе сайт, который содержит Flash-ролики, а также выпадающее меню, реализованное средствами JavaScript и/или CSS, которое должно раскрываться поверх Flash-ролика. По умолчанию, область плагина размещается поверх веб-страницы, а это означает, что это меню странным образом раскроется позади ролика. Такой же неприятный эффект проявляется и в случае, когда на страницах присутствуют «модальные» окна — любые Flash-ролики вставляются поверх остальных элементов страницы. Именно поэтому многие скрипты, использующие «модальные» окна, сначала отключают все объекты (плагины) на странице, и только потом запускаются сами, а после закрытия модального окна, отключенные объекты восстанавливаются.

В случае некоторых плагинов Flash разработчики могут исправить такую проблему с наложением Flash-содержимого поверх остальных элементов на странице добавлением атрибута wmode=’opaque’ в элементе и эквивалентным тегом

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

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

Благодаря тому, что элемент является родным в среде браузера, именно браузер заботится о его отрисовке. В связи с этим элемент работает также как и любой другой элемент на веб-странице. Его можно позиционировать, применять свойство float , перекрывать или динамически изменять его размеры без каких-либо дополнительных хаков. Даже возможно достичь такого интересного эффекта, как полупрозрачное видео, просто назначив ему необходимое значение свойства opacity с помощью CSS.

Оформление видео с помощью CSS

Уже сейчас элемент video является частью ряда открытых веб-технологий, и мы можем использовать CSS, чтобы легко оформить видео. В качестве простой демонстрации того, что можно достичь уже сегодня, мы применим переходные эффекты CSS к нашему видео с турецкими танцами, для изменения его размеров при срабатывании событий :hover или :focus . (Читайте руководство по переходным эффектам в CSS3 и 2D-трансформациям.)

Объединение элементов video и canvas

Так как браузер сам заботится о выводе и отрисовке видео, мы можем легко перекрыть видео другими элементами и скомбинировать его с другими элементами на странице. В этом примере элемент накладывается поверх видео (Эффект виден только во время воспроизведения).

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

Создание собственных элементов управления видео

play() и pause() Совершенно очевидно, эти методы начинают и останавливают воспроизведение видео. play() начнёт показ видео с текущей позиции воспроизведения. Когда фильм впервые загружен, этой позицией будет первый кадр ролика. Обратите внимание, что нет метода stop() — если вы хотите остановить воспроизведение и «перемотать» на начало ролика, вы должны использовать pause() и самостоятельно программно изменить текущую позицию воспроизведения. volume Этот атрибут может использоваться, чтобы получить или установить уровень громкости аудио-трека в видео — значение типа float от 0.0 (тихо) до 1.0 (громко). muted Независимо от уровня громкости позволяет отключить звук в видео. currentTime Этот атрибут возвращает текущую позицию воспроизведения в секундах (значение типа float). При установке этого атрибута позиция воспроизведения перемещается в указанную временную позицию, если это возможно.

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

loadeddata Возникает, когда браузер загрузил достаточный объем видео данных для начала воспроизведения с текущей позиции. play и pause Возникают, когда воспроизведение было начато или приостановлено. Если мы управляем видео с помощью JavaScript, нам понадобиться «прослушать» эти события, чтобы гарантировать, что вызов методов play() и pause() действительно был успешным. timeupdate Возникает при изменении текущей позиции воспроизведения. Причиной этого может служить то, что видео воспроизводится, скрипт изменил позицию программно или пользователь решил перескочить в другую позицию видео. ended Достигнут конец видео-трека и у элемента не установлен режим циклического воспроизведения или воспроизведения в обратном направлении (не обсуждаемые в этой статье).

Теперь у нас есть все основные строительные блоки, необходимые для создания простого контроллера. Прежде чем мы начнём, хочу вас предостеречь: когда мы создаём свой собственный контроллер на JavaScript, мы очевидно хотим подавить все собственные средства управления браузера по управлению воспроизведением видео. Однако, мы можем оставить их в качестве запасного варианта, в случае если пользователь отключил JavaScript в своем браузере. По этой причине мы сохраним атрибуты управления видео в нашей HTML-разметке и программно удалим их во время выполнения нашего скрипта. В качестве альтернативы мы также можем установить значение атрибутов на false — оба подхода действуют одинаково. Так как наш собственный контроллер основан на написанных нами функциях, мы создадим разметку самого контроллера в JavaScript.

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

Добавить комментарий