Vidzor Studio Kft

Interaktív
`<video>`

Demo

Tartalom

<video> lépésről lépésre
A valóság
Mobil platformok
Az elkövetkezendő jövő API-jai

`<video>`
lépésről lépésre

<video> 101


<video src="video.mp4" width="320" height="200" controls muted>
   Upsz...
</video>

<video> 202


<video preload="none|metadata|auto" poster="url">
   <source src="/video.webm" type="video/webm; codecs='vp8, vorbis'"/>
   <source src="/video.mp4" type="video/mp4; codecs='avc1.42C028, mp4a.40.2'"/>
   ...
</video>

Media Fragments URI


<video >
   <source src="/video.webm#t=10" type="video/webm"/>
   ...
</video>

<!-- Ahol #t=[start_time][,end_time] -->

Szerver oldal:

Accept Ranges: bytes Header támogatása
(lásd még videó seek)

API


var video = document.querySelector('video');

video.duration       // sec
video.currentTime    // sec
video.buffered       // TimeRange: start(idx), end(idx), length
video.play([time])
video.pause()
video.paused
video.volume         // [0-1]
video.muted
video.readyState     // HAVE_NOTHING | HAVE_METADATA | HAVE_CURRENT_DATA | HAVE_FUTURE_DATA | HAVE_ENOUGH_DATA

video.load()

API +


var video = document.querySelector('video'),
    w = video.videoWidth,
    h = video.videoHeight;

// Teljes képernyős mód
document.body.[moz|webkit|ms]RequestFullScreen()

// Képlopás a videóból
document.querySelector('canvas')
    .getContext('2d')
    .drawImage(video, 0, 0, w, h);

Events

Támogatottság

Chrome 3
Firefox 15
Internet Explorer 9
Safari 3

Formátum támogatottság

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

A valóság

Videó események
Letöltés / Bufferelés
Időzítés

Videó események

waiting / suspend / stalled
Különböző számú / hiányzó eventek
Hiányzó ended event loopolt videónál Chrome < 35 és IE alatt

Letöltés, buffering

Honnan tudjuk, hogy le tuduk játszani teljesen a videót?
canplaythrough, adaptív video streaming
Chrome párhuzamos letöltési limit

Letöltés, buffering II

IE9-ben nem működik a preload="none"
IE9-ban a poster csak preload="none"-nál
és a preload="metadata"-nál van
Preload kikapcsolásánál a letöltött videó mennyisége változik
Chrome és Firefox kb. 3MB, Safari 6, és IE9-nél 75MB (!)

Lejátszás

IE < 10 nem támogatja a fullscreen módot
Időzítési problémák
timeupdate event VS setTimeout VS requestAnimationFrame VS <track>

Mobil

Mobil platformok

Feltételzhetően limitált adatforgalom - nincs preload
Az autoplay általában korlátozott

iOS

iPhone-on a videólejátszás külön ablakban történik
A videó töltésének elindításához user interakció kell
- Metaadatok se töltődnek be
- Mivel így a videó magassága és szélessége ismeretlen az iOS
  egy default 300x150 pixeles méretet állít be.
  Ez a videó betöltése után se módosul
iOS8 alatt ha hiányzik az autoplay="false" attribútum,
a videó egyáltalán nem töltődik be
A hangerőt nem lehet JavaScript-ből állítani
- Csak a user állíthatja a fizikai gombokkal
- A volume property értéke mindig 1

iOS II

Egy oldalon egyszerre csak egy videó tölthető be
A videó forrásai azonban dinamikusan cserélhetőek
A playbackRate property-t nem támogatja az iOS
QuickTime logo a videó töltése alatt
- Nem érdekli a z-index beállítás
- Ha elrejtjük (visibility:hidden vagy display:none),
  a videó töltése megáll
- transition-okkel megoldható a logó
  látótéren kívülre való mozgatásával

Android (4.x)
(Default böngészőben)

A videó indításához a user interakciónak a videón kell történnie
Egyedi play-gombokkal a videó elindul, de azonnal megáll
Ha elindítunk egy videót egy tabon, majd elhagyjuk,
nem térhetünk vissza a videóhoz, frissítenünk kell az oldalt
Videózásra hazsnáljunk inkább Chrome-ot

Windows Phone

WP7
- A videó megnyitása külön ablakban történik
WP 8.1
- A videók már a böngészőben is lejátszhatóak
- valódi streaming támogatás MPEG-DASH-el

Az elkövetkezendő jövő API-jai

<track>
Media API-k
EME

<track>

Időzített szöveges adatsáv

Felirat
Fejezetek megjelölése
Keresési információk
Metaadatok
<audio>

DOM


<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>

WebVTT fájl

Web Video Text Track
Kiterjesztés: .vtt
MIME type: text/vtt
Időzített információkat tartalmaz cue
Nagyrészt megegyezik a SubRip formátumal (.srt)

WebVTT 1 - időzítés

WEBVTT

1
00:00:22.230 --> 00:00:24.606
Felirat

WebVTT II - pozícionálás

WEBVTT
2
00:00:34.159 --> 00:00:35.743 line:63% position:72% align:start
Pozícionálva

WebVTT III - formázás

WEBVTT
3
00:00:40.500 --> 00:00:41.500
<p>
   <c.classname>Negydik</c> formázva <i>dőlt</i> <b>félkövér</b>
</p>

WebVTT IV - adat

WEBVTT
4
00:00:60.500 --> 00:00:71.500
{
   "name": "Budapest"
   "latitude": 47.497912
   "longitude": 19.040235
}

Track - API


var video = document.querySelector("video"),
    textTracks = video.textTracks,
    textTrack = textTracks[0],
    cues = textTrack.cues,
    cue = cues[0],
    cueId = cue.id,
    cueText = cue.text,
    data = JSON.parse(cueText);

textTrack.addEventListener('load', ... );
textTrack.addEventListener('error', ... );

Track - API II


var track = video.addTextTrack('metadata'),
    cue = new TextTrackCue(0, video.duration, "text");

cue.addEventListener('enter', ...);
cue.addEventListener('exit', ...)

track.addCue(cue)

textTrack.addEventListener('cuechange', ... );

Demo

Támogatottság

Chrome 23
Firefox 31
Internet Explorer 10
Safari 6

Media API-k

API-k a videó (és audió) forrás manipulálásához

Mire jó?

Hangsáv váltás lejátszás közben
Bufferelés optimalizálása
Gyors váltás videók között
Videó részeletek korlátozás (pl. login)
Valódi videó stream

MediaSource

Kép és hang adatforrások kezelése

MediaSource - példa


var codec = 'video/webm; codecs="vorbis,vp8"',
    video = document.querySelector('video'),
    mediaSource = new MediaSource();

video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', function callback(e){
    var sourceBuffer = mediaSource.addSourceBuffer(codec);
    ...
    sourceBuffer.appendBuffer(new Uint8Array( chunk ));
    ...
    mediaSource.endOfStream();
}, false)

Támogatottság
MediaSource

Chrome 23
chrome://flags/#disable-media-source
Firefox 25
media.mediasource.enabled=true
Internet Explorer 11
Csak Window 8-on
Safari 8

MediaStream

Kép és hang adatfolyamok

Helyi: getUserMedia
Távoli: <video>, <audio>, WebRTC

MediaStream - példa


MediaStreamTrack.getSources(function(sourceInfo){
   sourceInfo // [{id:'', kind:'audio|video|..', label:''}, ..]
});

var constraints = {
   audio: { optional: [{sourceId: audioSource}] } || true,
   video: { optional: [{sourceId: videoSource}] } || true
};

navigator.getUserMedia(constraints, function success(stream) {
   videoElement.src = window.URL.createObjectURL(stream);
   videoElement.play();
}, errorCallback);

MediaStream - Demo

Támogatottság
MediaStream és `getUserMedia()`

Chrome 21
webkit prefix
Firefox 18
moz prefix
Internet Explorer ‐
Safari ‐

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

Működés

Browser észleli a titkosított médiát (metadata)
A needkey eseményre keresünk egy támogatott CDM-et
MediaKeys.isTypeSupported(CDM, type)
Létrehozzuk a MediaKey-t
video.setMediaKeys(new MediaKeys('keySystem'))
Létrehozzunk egy MediaKeySession-t
keySession = video.mediaKeys.createSession(contentType, initData)
A session message event üzenetét továbbítjuk a License szervernek
A válaszban kapott hitelesítés átadjuk a session-nek
keySession.update(license)

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

Támogatottság
Encrypted Media Extensions

Chrome 23
chrome://flags/#enable-encrypted-media
chrome://flags/#disable-prefixed-encrypted-media
Firefox 25
Internet Explorer 11
Csak Window 8-on
Safari 8

Köszönjük a figyelmet

Vidzor
<video>
- HTML5rocks - video basic
- Media events
<track>
- HTML5rocks - Track tutorial
- MediaStreamTrack példa
Media API
- HTML5rocks - MediaSource API
- HTML5rocks - Media Stream
Media titkosítás
- HTML5rock - EME WTF
- DASH.js
Példák
- Simpl.info

Vidzor Studio Kft

Interaktív <video>

Demo

Tartalom

<video> lépésről lépésre

<video> 101

<video> 202

Media Fragments URI

Szerver oldal:

API

API +

Events

Támogatottság

Formátum támogatottság

A valóság

Videó események

Letöltés, buffering

Letöltés, buffering II

Lejátszás

Mobil

Mobil platformok

iOS

iOS II

Android (4.x) (Default böngészőben)

Windows Phone

Az elkövetkezendő jövő API-jai

<track>

DOM

WebVTT fájl

WebVTT 1 - időzítés

WebVTT II - pozícionálás

WebVTT III - formázás

WebVTT IV - adat

Track - API

Track - API II

Támogatottság

Media API-k

Mire jó?

MediaSource

MediaSource - példa

TámogatottságMediaSource

MediaStream

MediaStream - példa

MediaStream - Demo

TámogatottságMediaStream és getUserMedia()

EME

Encrypted Media Extensions

Működés

Kapcsolódó technológiák

Media Source

Dynamic Adaptive Streaming over HTTP (DASH)

Media Presentation Description - .mpd fájl

Támogatottság Encrypted Media Extensions

Köszönjük a figyelmet

<video>

<track>

Media API

Media titkosítás

Példák

Interaktív
`<video>`

`<video>`
lépésről lépésre

Android (4.x)
(Default böngészőben)

Támogatottság
MediaSource

Támogatottság
MediaStream és `getUserMedia()`

Támogatottság
Encrypted Media Extensions