A presentation at Front-end London in in London, UK by Germain Souquet
Evolution of video on the web @GermainSouquet
Timeline • 2007 - HTML5 First draft • 2009 - Video lands on Firefox and Safari • 2010 - Video lands on Chrome • 2011 - Video lands on IE & Opera
👋 I’m Germain Front-end engineer @ Grabyo
” Distribute media on your app # Build immersive experiences $ A glimpse into the future
Distribute media on your app
Captions • Supported by all browsers • Mandatory in the USA % since 2016 • Makes video accessible to a wider audience
Autoplay policies • Playback blocked by default • A user gesture is required to start the playback • Or the video needs to be muted https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
During development Chrome: chrome://flags/#autoplay-policy Firefox: about:config - media.autoplay.enabled Edge: Settings > Advanced > Media autoplay Safari: Preferences > Websites > Autoplay
Media Engagement Index chrome://media-engagement
Media Capabilities API
“probably”
“maybe”
“”
&
Containers / Codecs If a video was an HTTP request, the container would be the headers and the codec would be the payload
Container 🆚 Codec Compressed video frames Contains meta data Can contain chapters, subtitles Web containers: webm, ogg, mp4. Web video codecs: h264, vp8, vp9, theora, av1 Web audio codecs: aac, vorbis, opus
Codec compression techniques • You need an encoder to create the video and a decoder for the playback • Same concepts as image compression • Splits a frame into blocks and tries to predict motion • Detects redundant information from one frame to the next
Group of pictures • I Frame (aka keyframe) • • P Frame (predicted) • • full frame containing all the pixels frame built based on the differences compared to the previous frame B Frame (bi-directional) • frame built based on the differences compared to the previous and next frame
https://github.com/leandromoreira/digital_video_introduction
Encode your content FFmpeg Handbrake GPAC MP4Box
If things go wrong… chrome://media-internals
Build immersive experiences
Media Source Extensions
WebRTC
Local sources • Microphone • Camera • Screen Sharing • Canvas stream
Canvas & requestAnimationFrame
🤔 OffscreenCanvas 🤔
WebAssembly &
Pros 🆚 Cons Benefit from all of the video tooling ecosystem No GPU support Consistent performance across different browsers
A glimpse into the future
https://www.w3.org/2018/12/web-roadmaps/mobile/
Distributed rendering • Presentation API • Remote Playback API • Audio Output Devices API
Timing object http://webtiming.github.io/timingobject/
Web GPU • Provide hooks for GPU operations • Create a new shader language HLSL backed by WebKit • • Web High Level Shading Language Efficient video streams processing
https://hacks.mozilla.org/2018/06/av1-next-generation-video-the-constrained-directional-enhancement-filter/
AV1 • Open and royalty-free • 20% compression improvements compared to VP9 • Next generation video codec
👏 Thanks! Find me on Twitter @GermainSouquet
It has been nearly a decade since the HTML5 video tag landed on browsers, and now, it’s ubiquitous on the web. We’ll go through a journey to see how the web platform has evolved as well as what the future will bring for video on the web.
Here’s what was said about this presentation on Twitter.
for free. You
can too.