Slide 1
Slide 2
How We Ditched iFrames and Learned to Love <video>
Slide 3
Table of Contents 0 whoami 1 Videos at Kitchen Stories 2 The <video> element 3 HTTP Live Streaming 4 Implementation
Slide 4
whoami
Slide 5
Oscar Braunert Web Developer at Kitchen Stories Trained designer Mostly owl, part-time human
Slide 6
A cooking platform, designed to make cooking accessible to everyone A recipe book, and much more High quality content presented with beautiful imagery
Slide 7
Videos at Kitchen Stories
Slide 8
Slide 9
Videos are Part of Our DNA Video is one of the premises Kitchen Stories was founded upon Great medium to show cooking process
Slide 10
Video Use Cases Recipe videos – showing creation of specific recipes How to videos – Showing kitchen skills
Slide 11
The <video> Element
Slide 12
«A video element is used for playing videos or movies.» HTML specification 4.8.6. – The video element
Slide 13
«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
Slide 14
Slide 15
Slide 16
Slide 17
HTTP Live Streaming
Slide 18
«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
Slide 19
Slide 20
Slide 21
Can I Use It?
Slide 22
Slide 23
Usage Instructions Most mobile clients support it Other browsers can learn to use it
Slide 24
«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
Slide 25
hls.js Hooks into the Media Source Extensions API It essentially takes the HLS source and transforms it
Slide 26
Implementation
Slide 27
Data Videos hosted at Vimeo HLS manifest retrieved via their API
Slide 28
Handling Play
Slide 29
Slide 30
Slide 31
Slide 32
The poster attribute … and why we don’t use it
Slide 33
«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
Slide 34
Two Problems Only a single image Shown while no data is available
Slide 35
Slide 36
Slide 37
Small Gestures Can Go a Long Way
Slide 38
What Makes a Gesture An explicit interaction of the user with the page Interaction does not have to be targeted at the <video> itself
Slide 39
Example
Slide 40
One Last Thing
Slide 41
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.
Slide 42
We are hiring. Come talk to me, or take a look at https://www.kitchenstories.com/jobs
Slide 43
Thank you. _ovlb oscar.braunert@kitchenstories.com www.kitchenstories.com www.ovl.design
