How We Ditched iFrames and Learned to Love <video>
A presentation at Upfront #86 in in Berlin, Germany by Oscar
How We Ditched iFrames and Learned to Love <video>
Table of Contents 0 whoami 1 Videos at Kitchen Stories 2 The <video> element 3 HTTP Live Streaming 4 Implementation
whoami
Oscar Braunert Web Developer at Kitchen Stories Trained designer Mostly owl, part-time human
A cooking platform, designed to make cooking accessible to everyone A recipe book, and much more High quality content presented with beautiful imagery
Videos at Kitchen Stories
Videos are Part of Our DNA Video is one of the premises Kitchen Stories was founded upon Great medium to show cooking process
Video Use Cases Recipe videos – showing creation of specific recipes How to videos – Showing kitchen skills
The <video> Element
«A video element is used for playing videos or movies.» HTML specification 4.8.6. – The video element
«The video element is a media element whose media data is ostensibly video data, possibly with associated audio data.» HTML specification 4.8.6. – The video element
HTTP Live Streaming
«HTTP Live Streaming is an adaptive bitrate streaming protocol introduced by Apple in 2009. It uses m3u8 files to describe media streams and it uses HTTP for the communication between the server and the client.» Tomo Krajina – Introduction to HTTP Live Streaming: HLS on Android and More
Can I Use It?
Usage Instructions Most mobile clients support it Other browsers can learn to use it
«The Media Source Extensions API (MSE) provides functionality enabling plugin-free web-based streaming media. Using MSE, media streams can be created via JavaScript, and played using <audio> and <video> elements.» MDN
hls.js Hooks into the Media Source Extensions API It essentially takes the HLS source and transforms it
Implementation
Data Videos hosted at Vimeo HLS manifest retrieved via their API
Handling Play
The poster attribute … and why we don’t use it
«The poster attribute gives the address of an image file that the user agent can show while no video data is available.» –HTML specification 4.8.6. – The video element
Two Problems Only a single image Shown while no data is available
Small Gestures Can Go a Long Way
What Makes a Gesture An explicit interaction of the user with the page Interaction does not have to be targeted at the <video> itself
Example
One Last Thing
We are hiring. Frontend Developer Experience in working with Vue and CSS. A knack for great user experiences and accessibility. Digital Product Designer Familiarity with Sketch and prototyping. Advocate for design consistency and delightful user experiences.
We are hiring. Come talk to me, or take a look at https://www.kitchenstories.com/jobs
Thank you. _ovlb oscar.braunert@kitchenstories.com www.kitchenstories.com www.ovl.design
This talk will walk you through the infrastructural decisions and complications Oscar and his team encountered while refactoring the video experience on kitchenstories.com.
You will learn about HLS, poster images and why small gestures can go a long way (in life and opening overlays).
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Our Road to Native Videos on the Web
In-depth look at the implementation covered in the presentation
-
HTML Video Element Specification
-
Introduction to HTTP Live Streaming
Article on the Toptal blog giving a very good introduction into HTTP Live Streaming
-
Media Source Extensions API
MDN article on the Media Source Extensions API
-
New <video> Policies for iOS
Article introducing changes in the way iOS Safari allows developers to play video
Code
The following code examples from the presentation can be tried out live.
