1source Video
🛑 👉🏻👉🏻👉🏻 INFORMATION AVAILABLE CLICK HERE👈🏻👈🏻👈🏻
1source Video
Все потоки
Разработка
Администрирование
Дизайн
Менеджмент
Маркетинг
Научпоп
Да, да, это очередная статья про html5 и тэг < video >. Но главным ее отличием будет то, что здесь будут рассмотрены самые базовые понятия и теории. Так что приготовились внимательно читать и записывать, let html5 rocks !
Пишем код
Итак, чтобы видео появилось на вашей веб-страничке пишем следующий код:
< video >
< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
>
Сразу обратим внимание на тэг < source >, который позволяет включать видео разных форматов, что важно в тех случаях когда один из них не поддерживается тем или иным браузером.
Само собой есть и более простой вариант вставки видео:
< video src ="movie.webm" >
Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.
А теперь стоит сказать об еще одной важной вещи. Не забудьте выставить верный MIME type в заголовках Content-Type на вашем сервере. Иначе видео либо не будет вообще работать, либо будет работать не у всех. В случае Apache все решается добавлением следующих строк в httpd.conf:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
- url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)
И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source , для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.
Форматы видео
Видео файл в любом из видео форматов , следует воспринимать как zip-архив содержащий видео поток и аудио поток . Вот три видео формата, наиболее распространенных в сети:
mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
(К сожалению хабр не позволяет вставить примеры с сайта оригинала, так что придется смотреть их там — прим. пер.)
На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:
< video >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
Video tag not supported. Download the video < a href ="movie.webm" > here .
< video > >
Одно «НО» — если вы рассчитываете, что ваш сайт будет использоваться под айпадом, укажите видео в формате .mp4 первым, данная особенность связана с багом на самом айпаде.
И раз уж зашла речь про .mp4 следует отметить ряд пунктов. Во-первых, видеокодек h.264 не является бесплатным, так что за лицензию надо платить. Почитать об этом можно вот тут . Во-вторых, надо быть абсолютно точно уверенным в указанных видео и аудиокодеках, они могут отличаться от видео к видео. Наиболее распространенным можно считать «avc1.42E01E, mp4a.40.2», так что на всякий случай сверяемся тут .
IE ;)
Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.
Chrome Frame
Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. ( Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин. )
Назад к Flash
Ну и никто не отменял флеш — опознаем браузер, видим ие, грузим флэш. Тем более что Adobe добавило в список проигрываемых видеоформатов формат .webm. Так что даже не придется что то думать с перекодировкой.
Шифруемся, или надо перекодировать видео
В случае если есть необходимость переконвертировать видео, то хорошей программой является Miro Converter , имеющая версии под винду и мак. В программе не так много возможностей поиграть с параметрами, но зато она позволяет конвертировать в три основных формата. А если посмотреть на нее более пристально, то можно увидеть, что это оболочка для ffmpeg и ffmpeg2theora , которые работают во всех ОС из под командной строки. Подробно об этой программе можно прочитать вот здесь .
Плюшки
Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. ( К сожалению опять без наглядных примеров, так что идем на сайт оригинала )
Video + HTML
Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay . В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру — «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload , который позволяет подгружать видео фоном. В итоге получаем нечто подобное:
< video poster ="star.png" autoplay loop controls tabindex ="0" >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
Ну и вариант для тех, кто соблюдает стандарты:
< video poster ="star.png" autoplay ="autoplay" loop ="loop" controls ="controls" tabindex ="0" >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
Video + JS
Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте W3 .
Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:
video.addEventListener( 'canplay' , function (e) {
this .volume = 0.4;
this .currentTime = 10;
this .play();
}, false
В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.
Video + CSS
Тут практически без комментариев — видео как элемент веб-страницы воспринимает всевозможные css штуки — начиная от border , opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.
Video + canvas
HTML5 принес в этом мир еще одну мощную вещь — canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно — ничего.
Пример совместного использования canvas и video может быть следующим — получение скриншотов из проигрываемого видео. У canvas есть метод drawImage , позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video ! А с помощью другого метода — toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:
video_dom.addEventListener( 'play' , function () {
video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height = video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext( '2d' );
draw_interval = setInterval( function () {
// import the image from the video
ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
// export the image from the canvas
var img = new Image();
img.src = canvas_draw.toDataURL( 'image/png' );
img.width = 40;
frames.appendChild(img);
}, 1500)
}, false );
Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь — WebGL .
Video + SVG
SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects . С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:
< svg id ='image' version ="1.1" xmlns ="http://www.w3.org/2000/svg" >
< defs >
< filter id ="myblur" >
< feGaussianBlur stdDeviation ="1" />
< style >
video { filter:url(#myblur); border: 2px solid red; }
Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css.
Заключение
Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете ( и на хабре — прим. пер. ) выложена уже масса примеров ( 1 , 2 , 3 , 4 , 5 , 6 )
Радует то, что на достигнутом никто не собирается останавливаться и возможно в будущем нас ждет возможность работы с микрофоном и камерой и поддержка вещания .
+33
40,7k
93
35
+23
5,2k
18
21
+5
360
1
11
8 000
за проект
44 отклика
138 просмотров
3 000
за проект
11 откликов
49 просмотров
1 000
за час
3 отклика
43 просмотра
3 000
за проект
1 отклик
10 просмотров
25 000
за проект
4 отклика
17 просмотров
На случай, если не поддерживается, достаточно в разметке указать альтернативу
…
Download the movie
...
Let HTML5 rock, но только тогда когда все браузеры будут ОДИНАКОВО его поддерживать. В данный момент ситуация такая, что даже для тех браузеров что его поддерживают на каждую фичу свой хак, так что пока не надо кривизны, спасибо.
А с какой сборки Adobe Flash Plugin научился WebM?
В курсе, но интересует номер сборки, которого по ссылке нет.
Ну и вариант для тех, кто соблюдает стандарты А причём тут стандарты? HTML5 разрешает использование атрибутов без значения.
«Доктор, это же не аккуратненько» (с) Просто есть люди, которые любят все делать совсем совсем по правильному.
Не сказал бы что это «от А до Я». На самом деле это галопом по Европам.
Много чего не раскрыто или описано жиденько. Например создание своего плеера (там куча граблей), многие параметры описаны без указания подробностей (например preload доступен не во всех браузерах и для ранних версий стоит использовать autobuffer).
Не описано работа со звуком (более детально) и т.д. Разные контролы в разных браузерах — это вообще не прикольно, поэтому лучше свои сделать.
И остальные мелочи не упоминаю. Про правильное чередование сорцов — тоже, т.к. очевидно же, что для большей совместимости стоит mp4 поставить выше, а не «если ...». Ставьте сразу правильно и не гадайте что у пользователя.
Кроме того ничего не указано про Theora (хотя мое мнение — ей гайки после выхода vp8).
Вообще область очень интересная, мне в ней интересно копаться, поэтому статьи по типу «от а до я» — вызывают умиление )
Нафиг этот не сдался, только лишние проблемы.
Если уж зашла речь про видео в HTML5 и были упомянуты iPhone/iPad-ы, до было бы неплохо, хотя бы в кратце, пробежаться по IETF HTTP Live Streaming
Оно, конечно, драфт, но уже работающий де-факто…
Насчёт разных форматов (альтернативных source), то тут пока не без проблем. Помимо указанного в статье iPad проблема с выбором сорса есть и у iPhone и у Android — видимо проблема в Webkit. Пришлось писать только поддерживаемый формат (*.mov/*.mp4) исходя из user-agent…
разве указание его первым в списке сорсов — не решает проблему?
Если страница с видео предназначена и для iPhone и для Android — кому быть первым?
«укажите видео в формате .mp4 первым»
У меня для вас плохие новости…
iPhone не воспроизводит mp4 и требует mov первым. Догадайтесь какова ситуация с Android…
Когда разговор идёт о HTML5 video у меня всегда возникал один и тот-же вопрос: можно ли будет видоизменять сам плеер, т.е. всякие там ватермарки поверх видео, список похожих видео после проигрывания и т.д. Просто если нет — то ни один более-менее посещаемый сайт, держащий на своём серваке видео, не откажется от своего flash плеера, и по сути этот тэг ничего глобально не изменит, так, будет очередной приятной плюшкой, которой изредка кто-нибудь будет пользоваться. Однозначной информации на этот счёт я не нашёл, может подскажете?
вотермарк легко ложится через блок поверх видео, в этом нет ничего сложного.
Список похожих видео можно также выводить. Да и вообще обрабатывать video.ended не проблема и вешать туда что угодно.
Водяной знак скорее на само видео ставится на сервере, а простое наложение поверх никакой защиты не даст.
То ясно, но не только же для защиты его использовать.
защиты от чего? Если идет речь о логотипе ресурса, то его обычно никто не кладет на сервере в видео (ну разве что плеер не поддерживает вывод логотипа поверх видео).
А Вы ничего не путаете с платностью H.264? Может быть у Вас устаревшая информация? Недавно была такая новость: «Ассоциация MPEG LA объявила о том, что кодек H.264 останется бесплатным для Интернет-использования и после 2015 года» (DeepApple / AppleInsider)
> кодек H.264 останется бесплатным для Интернет-использования и после 2015 года
Только для видео в Интернет и только для бесплатных трансляций.
Умеет ли принимать потоковое видео по RTSP/RTP и выводить его в указанном размере?
Однако, парсер. Умеет ли данный тег вышеспрошенное?
Пробовал на сотовых — не получилось. Прямая ссылка на RTSP работала (системный проигрыватель по-умолчанию), а через video (браузер в качестве проигрывателя) нет.
а кто знает, как перекрасить кнопки тега VIDEO? ну или на край убирать их если мыша не над тегом находится (как это IE делает). (то что их можно вообще выключить знаю)
54,4k
394
8,4k
18
8,5k
16
78k
278
+55
54,4k
147
394
+21
35,3k
13
58
+12
38k
4
172
+67
18,9k
30
66
Публикации
Новости
Хабы
Компании
Пользователи
Песочница
Устройство сайта
Для авторов
Для компаний
Документы
Соглашение
Конфиденциальность
Реклама
Тарифы
Контент
Семинары
Мегапроекты
Мерч
Присылаем лучшие статьи раз в месяц
Только полноправные пользователи могут оставлять комментарии. Войдите , пожалуйста.
1 st source production - YouTube
HTML5- видео
HTML Video
Тег < video > | htmlbook.ru
< video > - HTML | MDN | Multiple Sources Example
Micro Shorts Porn
Big Nippels
4some Show
Free Huge Cocks Pics
Girl Naked Dance
