perfecting video playback on the web
TRANSCRIPT
Perfecting <video> playback on the webJanessa Det (@jandet)!Web Lead at
https://vine.co/v/OmQZQAjhOrj Vine by Reid Wiseman
✨ let’s build Vine! ✨
videos that loophttps://twitter.com/cher/status/398735343207186433
(encoding: h264 mp4)
@jandet
piece of cake 🍰<video src=“https://happyvideourl.mp4”></video>
@jandet
cross-browser support
FF mp4 support!
transcoding?!
mediasource.js!
flash
https://vine.co/v/On1YDQKJmMw@jandet
crash those browsers
too many video players crash Chrome!
> 1 video player w/ same src freezes up video player b/c of cache locking!
https://vine.co/v/O76KLlqh7Kd@jandet
mobile web
iOS fullscreens video!
autoplay difficult!
HTTP Range Header!
initializing too many video players at once caused all of them to fail!
ppl have data plans
https://vine.co/v/OhqUT3w7A3z@jandet
preloading
video files are big!
how do we make the scrolling playback experience smooth and seamless!
(w/o firing off a gajillion requests at once)
https://vine.co/v/OhqUbwIKDbu@jandet
loopsVine is the best way to see and share life in motion. Create
short, beautiful, looping videos!in a simple and fun way for your friends and family to see.
@jandet
what is going on here?!
video
audio!
0.05sec 0.05sec
playback behavior
@jandet
seamless loops
<video>
<video>
toggle!opacity!
at specific!timestamp
video
audio!
video
audio!
(but browsers…)@jandet
👼 the answer 👼
Media Source Extensions
🙏
@jandet
video
audio!
video
audio!
video
audio!
source buffer
video
audio!
@jandet
!!!!!client.onload…!!var mediaSource = new MediaSource(); player.setSrc(window.URL.createObjectURL(mediaSource)); !var buffer = new Uint8Array(client.response); !!!!
transcoding to MPEG-Dash <— streaming format!Initialize MediaSource
get the raw file…!!client.open('GET', file, true); client.responseType = 'arraybuffer'; client.send(); !!!!!!!!!!
@jandet
!!!!!!!!!!!mediaSource.onsourceopen…!!
var sourceBuffer = mediaSource.addSourceBuffer( 'video/mp4; codecs="avc1.4d401e, mp4a.40.2”’ );
source buffer
var appendTime = sourceBuffer.buffered.length > 0 ? sourceBuffer.buffered.end(sourceBuffer.buffered.length - 1) : CUT_OFF; !sourceBuffer.timestampOffset = appendTime - CUT_OFF; !sourceBuffer.appendWindowStart = appendTime; sourceBuffer.appendWindowEnd = appendTime + duration - 2 * CUT_OFF; !sourceBuffer.appendBuffer(buffer);
timestampOffsetappendWindowStart
appendWindowEnd
video
audio!
video
audio!
timestampOffsetappendWindowStart
appendWindowEnd
…ad infinitum
@jandet
👯 additional challenges 👯
copy ad infintum?!
MPEG-Dash files are larger!
we have ONE player element!
UA sniffing? nevarr
https://vine.co/v/OJuPB2ZbJ1V@jandet
special thanks
Thomas Rix!
Mike Kaplinskiy!
Felix Fung!
Chrome video team
@jandethttps://vine.co/v/Ml0BxhrtwVA
https://vine.co/v/O1U0nVB6UOX https://vine.co/v/On1bum1O679