HTML5 Video

video > source src ="movie.mp4" type ='v' /> source src ="movie.webm" type ='v' /> video > >

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

І ще одна дуже важлива річ, яку варто згадати. Потрібно вказувати значення параметраtypeу тезіsource, щоб браузер автоматично зміг розпізнати потрібний формат і підвантажити саме його, що дозволить збільшити продуктивність.

video > source src ="movie.webm" type ='v' /> source src ="movie.mp4" type ='v' /> source src ="movie.ogv" type ='v' /> V > a href = "movie.webm" > here a > . video > >

Буря захоплення пронеслася інтернетом, коли вийшов новий IE 9. Однак поки є щасливі власники IE 6, доводиться витончуватися. Пара можливих рішень.

Chrome Frame

Назад до Flash

Video + HTML

video poster = "star.png" autoplay loop controls tabindex = "0" > source src ="movie.webm" type ='v' /> source src ="movie.ogv" type ='v' /> video >

video poster = "star.png" autoplay = "autoplay" loop = "loop" controls = "controls" tabindex = "0" > source src ="movie.webm" type ='v' /> source src ="movie.ogv" type ='v' /> video >

Тег video має ряд параметрів, керувати якими можна за допомогою яваскрипту. Приклад можна побачити на веб-сайті W3.

v >'canplay' , function (e) this .volume = 0.4; this .currentTime = 10; this .play(); >, false

Video + CSS

Video + canvas

HTML5 приніс у цьому світ ще одну потужну річ – canvas. І що ж заважає нам використовувати два ці нововведення разом?Правильно – нічого.

v >'play' , function () v > v > 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 = новий Image(); img.src = canvas_draw.toDataURL( 'image/png' ); , 1500) , false);

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" /> filter > defs > svg > style > video < filter:url(#myblur); border: 2px solid red; > style >

Подібний inline-варіант обробки працює у Firefox 4 та IE9, для решти браузерів вже необхідний яваскрипт та css.

Висновок

Без сумніву вже багато хто зміг оцінити плюси від нового html компонента. В інтернеті (і на хабрі - прим. пер.) викладено вже масу прикладів (1, 2, 3, 4, 5, 6)

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

Хардкорна конфа за С++. Ми запрошуємо лише профі.

---