Как сделать собственный видео-плеер на HTML5 Video

[vplka]

Скорее бы появилась возможность полноценного fullscreen на не веб-китных браузерах.

[maxvipon]

А на веб-китовых разве есть полноценный фуллскрин? У меня в хроме только на окно браузера разворачиваеться… Потом меню > фуллскринн.

[Loci]

на маке есть полноценный фуллскрин. уже очень давно кстати.

[maxvipon]

В сафари да. В хроме на маке — нет. В файрфоксе на маке — тоже нет.

[Loci]

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

[maxvipon]

Ну вот… нет квиктайма, нет фуллскрина…

[avatarmov]

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

[Turbo]

А можно автора попросить написать JS-код для такой фичи: после 30 секунд непрерывного проигрывания в появляется строчка complete. Хочу сделать счетчик просмотров ролика. Заранее спасибо.

[Turbo]

Строчку вырезало:
<div id="complete"></div>

[kichik]

Именно в такой постановке задачи, не уверен, что считать эффективным решением :)

Есть такие варианты:
1. По timeupdate проверять, что текущая позиция больше 30 секунд и увеличивать счетчик:

video.addEventListener("timeupdate", function() {
    if (video.currentTime >= 30.0) console.log("complete");
}, false);

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

2. Попробовать смотреть на свойство played — там TimeRanges с промежутками, которые пользователь смотрел. По ним можно пройтись и проверить, есть ли длинее 30 секунд.

for (var i = 0; i < video.played.length; i++) {
    if ((video.played.end(i) - video.played.start(i)) >= 30.0) console.log("complete");
}

[Turbo]

Для JWPlayer (в Flash) у меня сейчас сделано как-то так:

function playerReady( obj )
{
JWplayer = document.getElementById( obj.id );
....
JWplayer.addModelListener('TIME', 'timeMonitor');
JWtotalPlayed = 0;
JWskippedVideo = 0;
};

function timeMonitor(obj)
{
if (JWtotalPlayed > 1000000)
{
return;
}
if (JWtotalPlayed > 30)
{
loadHTML('/test.php?&id=' + JWcurrentVideoID, 'data');
JWtotalPlayed = 2000000;
}
JWcurrentPosition = obj.position;
if (JWpreviousPosition < JWcurrentPosition - .5)
{
JWskippedVideo += JWcurrentPosition - JWpreviousPosition;
} else {
JWtotalPlayed += JWcurrentPosition - JWpreviousPosition;
}
JWpreviousPosition = JWcurrentPosition;
};

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

[konki]

Кадры из ролика, который встроен в устройства Archos?

[Laplace]

Ролик Big Buck Bunny часто используется в качестве тестового файла для видео кодеков и плееров вместе с другими свободными (в данном случае Creative Commons Attribution) мультфильмами. Хотя я тоже не понимаю, почему никто не снимет, не отредерит, не закапчурит, не нарисует новый, ведь эти уже всем надоели.

[skitalets]

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

З.Ы. в HTML5 вообще много методов по работе с видео. И это радует: хоть какой-то прогресс.

[Amarelle]

А теперь добавлю-ка я ложку (или половничек) дёгтя в Ваш медок: а что Вы скажете о планшетах, мобильниках с из Android, iOS,…
Сам сейчас занят HTML5 мультимедией для разных усройств (основной упор как раз на Андрооид 2.1 — уж не удивляйтесь, заказчик хочет купить мегаораву устройств именно на этой версии, и перепрошивать их на новую версию — да я умру, пока закончу). Поэтому могу добавить пару штрихов, прочитанных, например, здесь. Кстати, познавательная статейка, почитайте.
По Андроидам. Если оный Андроид младше версии 2.3, то есть пара глюков:
1) атрибут type не нужен, даже мешает. Поэтому его убрать, а расширение файла ЖЕСТКО должно быть mp4. У меня этот блок таков:

video id="video"
source src="video.mp4"
/video


(Все три строки открываются и закрываются угловыми скобками, но их не могу поставить — парсер Хабра глючит).

Вся логика обеспечивается JavaScript. Почему Джавой? А вот почему:
2) Атрибут controls НЕ поддерживается. Вот такая вот петрушка.

По iOS 3.2 (iPhone, iPod Touche, iPad 1 — у второго айпада версия iOS 4, и там нижеописанные баги пофиксены):
1) не распознаёт видео, если есть атрибут poster.
2) если у Вас несколько атрибутов source, то видит только первый из них. Так что H.264+AAC (в контейнере MP4) вставляйте первым.

А теперь насчет энкодинга. Все эти вышеописанные ОСи (даже, наверное, новейшие их версии) поддерживают дажеко не все варианты. Например, MP4 поддерживается только в следующей комбинации: видео H.264 (только профиль baseline), аудио AAC (профиль кодирования low complexity).
С WebM и Ogg (Theora+Vorbis) тоже свои затыки. Вообще, эта тема весьма обширна, так что не буду повторяться, а отошлю к вышеназванной ссылке.

[tym32167]

Спасибо за статью. Не хватает только у Вас в коде
var controls = {
....
dynamic: $("#dynamic"),
....