Vidzor Studio Kft

Több mint
<video>

Fekete György / Vadász László

Demo

Egy kis történelem

Flash és Silverlight

  • + Egységes
  • + Video stream
  • − Plugin szükséges
  • − Zárt
  • − A HTML és Flash közötti kommunikáció nehézkes
  • − Gyártók támogatásának hiánya

<object width="300" height="500">
   <param name="movie" value="http://www.yoursite.com/video.flv">
   <embed src="http://www.yoursite.com/video.flv" width="300" height="500"></embed>
</object>

HTML5 video

  • + Szabványos
  • + Többféle formátum
  • + HTML API
  • + Mobil eszközökön is elérhető
  • + Folyamatos fejlesztés
  • − Video stream és titkosítás hiánya *
  • − Implementációs eltérések

<video preload="auto" poster="url">
   <source src="/video.webm#t=10" type="video/webm; codecs='vp8, vorbis'"/>
   ...
</video>

Böngésző és formátum támogatottság

  • Chrome 3+: WebM, OGV, MP4 audio: AAC|MP3
  • Firefox 15+: WebM, OGV, MP4 részlegesen
  • Internet Explorer 9+: MP4, WebM külön codekkel
  • Safari 3+: MP4 audio: AAC, OGV külön codekkel + QuickTime

Implemtációs eltérések problémája

  • Különböző számú / hiányzó eventek
  • Chrome párhuzamos letöltési limit
  • IE9-ben nem működik a preload="none" (mobile adatformagolom!)
  • IE < 10 nem támogatja a fullscreen módot
  • Időzítési problémák
  • timeupdate event VS setTimeout VS requestAnimationFrame VS <track>
  • iPhone-on a videólejátszás külön ablakban történik

Az egyszerű videólejátszás esetén ezek a hibák nem okoznak fennakadást

A közeljövő

<track>

Időzített szöveges adatsáv

  • Típusai:
    • Felirat
    • Fejezetek megjelölése
    • Keresési információk
    • Metaadatok
  • Betölthető fájlként (VTT fájl ~ SubRip)
  • Dinaikusan is létrehozható (időzítés)
  • Támogatottság
    • Chrome 23+
    • Firefox 31+
    • Internet Explorer 10+
    • Safari 6+

<track> ‐ példa


<video>
   <source ...>
   <track kind="subtitle" src="sub-en.srt" srclang="en" default>
   <track kind="subtitle" src="sub-hu.srt" srclang="hu">
   <track kind="chapters" src="...">
   <track kind="descriptions" src="...">
   <track kind="metadata" src="meta.vtt" label="Location informations">
</video>

MediaSource és MediaStream

  • MediaSource
    • Videó (és audió) forrás manipulálása
    • Hangsáv váltás lejátszás közben
    • Bufferelés optimalizálása
    • Videó részletek korlátozás (pl. login)
  • MediaStream
    • Valódi audio/videó stream
    • Helyi adatfolyam pl: webkamera
    • Távoli adatfolyam pl: WebRTC
  • Támogatottság
    • Chrome 23+
    • Firefox 25+
    • Internet Explorer 11+ (részben)
    • Safari 8+ (részben)

MediaStream ‐ példa

EME

Encrypted Media Extensions

  • A Media Element (opcionális) bővítménye
  • Csak egy API nincs benne a tartalom védelem
  • Felhasználó azonosítást nem tartalmaz
  • Netflix!
  • Támogatás
    • Chrome 23 Alapből flag mögé rejtve
    • Firefox 25
    • Internet Explorer 11 Csak Window 8-on
    • Safari 8

Kapcsolódó technológiák

  • Media Source

    • Feldarabolt média stream-elése

  • Dynamic Adaptive Streaming over HTTP (DASH)

    • Körülményektől függő videó bitrate
    • DASH.js

  • Media Presentation Description - .mpd fájl

    • XML alapú
    • Stream-elt, több felbontásos (esetleg titkosított) videófálok leírója

Jelen

Trendek - lehetőségek

  • Rohamosan növekvő videó fogyasztás (~80-90%)
  • Webes technológiák rohamos fejlődése
  • Egyre jobb és egységesebb videó paltform (HTML5)
  • Egyszerű videó készítés -> egyszerű szerkesztés?
  • Videó mint reklámfelület
  • Videó lejtászás lehetőségeink kibővítése

Video game

360° videó

Paralell videó

WebGL

További lehetőségek

  • Mozgáskövetés
  • Arcfelismerés
  • Autómatikus fejezet keresés/felismerés

Köszönjük a figyelmet

qr code