Perfecting video playback on the web
1 like1,191 views
Janessa Det discusses perfecting video playback on the web. This includes making videos loop seamlessly, supporting multiple browsers, handling mobile playback, preloading video files efficiently, and using the Media Source Extensions API to implement seamless looping by dynamically updating video source buffers. Additional challenges include copying video content infinitely to implement perfect looping and managing larger video file sizes within a single HTML5 video player element across different user agents.
Perfecting video playback on the web
- 1. Perfecting <video> playback on the web Janessa Det (@jandet)! Web Lead at https://vine.co/v/OmQZQAjhOrj Vine by Reid Wiseman
- 2. ✨ let’s build Vine! ✨ videos that loop (encoding: h264 mp4) https://twitter.com/cher/status/398735343207186433 @jandet
- 3. piece of cake <video src=“https://happyvideourl.mp4”></video> @jandet
- 4. cross-browser support FF mp4 support! transcoding?! mediasource.js! flash https://vine.co/v/On1YDQKJmMw @jandet
- 5. 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
- 6. 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
- 7. 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
- 8. loops Vine 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
- 9. let's take a look @jandet
- 11. what is going on here?! video audio! 0.05sec 0.05sec playback behavior @jandet
- 12. seamless loops <video> <video> toggle! opacity! at specific! timestamp video audio! video audio! (but browsers…) @jandet
- 13. the answer Media Source Extensions @jandet
- 14. video audio! video audio! video audio! source buffer video audio! @jandet
- 15. transcoding to MPEG-Dash <— streaming format! Initialize MediaSource get ! the raw file…! ! ! client.open('GET', file, true); ! client.responseType = 'arraybuffer'; client.! send(); ! ! ! ! ! client.onload…! ! var mediaSource = new MediaSource(); player.setSrc(window.URL.createObjectURL(mediaSource)); ! var buffer = new Uint8Array(client.response); ! ! ! ! ! ! ! ! ! ! ! ! ! mediaSource.onsourceopen…! ! var sourceBuffer = mediaSource.addSourceBuffer( @jandet 'video/mp4; codecs="avc1.4d401e, mp4a.40.2”’ );
- 16. source buffer video timestampOffset audio! appendWindowStart appendWindowEnd video appendWindowEnd audio! timestampOffset appendWindowStart var appendTime = sourceBuffer.buffered.length > 0 ? …ad infinitum 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); @jandet
- 17. additional challenges copy ad infintum?! MPEG-Dash files are larger! we have ONE player element! UA sniffing? nevarr https://vine.co/v/OJuPB2ZbJ1V @jandet
- 18. special thanks Thomas Rix! Mike Kaplinskiy! Felix Fung! Chrome video team @jandet https://vine.co/v/Ml0BxhrtwVA https://vine.co/v/O1U0nVB6UOX https://vine.co/v/On1bum1O679