YouCam - Video Editing, Photo Editing, & Blu-ray Playback Software
Perfecting video playback on the web
-
Upload
janessa-det -
Category
Technology
-
view
419 -
download
1
Transcript of Perfecting video playback on the web
![Page 1: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/1.jpg)
Perfecting <video> playback on the webJanessa Det (@jandet)!Web Lead at
https://vine.co/v/OmQZQAjhOrj Vine by Reid Wiseman
![Page 2: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/2.jpg)
✨ let’s build Vine! ✨
videos that loophttps://twitter.com/cher/status/398735343207186433
(encoding: h264 mp4)
@jandet
![Page 3: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/3.jpg)
piece of cake 🍰<video src=“https://happyvideourl.mp4”></video>
@jandet
![Page 4: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/4.jpg)
cross-browser support
FF mp4 support!
transcoding?!
mediasource.js!
flash
https://vine.co/v/On1YDQKJmMw@jandet
![Page 5: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/5.jpg)
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
![Page 6: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/6.jpg)
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
![Page 7: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/7.jpg)
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
![Page 8: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/8.jpg)
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
![Page 11: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/11.jpg)
what is going on here?!
video
audio!
0.05sec 0.05sec
playback behavior
@jandet
![Page 12: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/12.jpg)
seamless loops
<video>
<video>
toggle!opacity!
at specific!timestamp
video
audio!
video
audio!
(but browsers…)@jandet
![Page 13: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/13.jpg)
👼 the answer 👼
Media Source Extensions
🙏
@jandet
![Page 14: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/14.jpg)
video
audio!
video
audio!
video
audio!
source buffer
video
audio!
@jandet
![Page 15: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/15.jpg)
!!!!!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”’ );
![Page 16: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/16.jpg)
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
![Page 17: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/17.jpg)
👯 additional challenges 👯
copy ad infintum?!
MPEG-Dash files are larger!
we have ONE player element!
UA sniffing? nevarr
https://vine.co/v/OJuPB2ZbJ1V@jandet
![Page 18: Perfecting video playback on the web](https://reader033.fdocuments.in/reader033/viewer/2022042701/55a20b4b1a28abd24e8b45d9/html5/thumbnails/18.jpg)
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