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