How We Ditched iFrames and Learned to Love <video>

A presentation at Upfront #86 in March 2019 in Berlin, Germany by Oscar

Slide 1

Slide 1

Slide 2

Slide 2

How We Ditched iFrames and Learned to Love <video>

Slide 3

Slide 3

Table of Contents 0 whoami 1 Videos at Kitchen Stories 2 The <video> element 3 HTTP Live Streaming 4 Implementation

Slide 4

Slide 4

whoami

Slide 5

Slide 5

Oscar Braunert Web Developer at Kitchen Stories Trained designer Mostly owl, part-time human

Slide 6

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

Slide 7

Videos at Kitchen Stories

Slide 8

Slide 8

Slide 9

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

Slide 10

Video Use Cases Recipe videos – showing creation of specific recipes How to videos – Showing kitchen skills

Slide 11

Slide 11

The <video> Element

Slide 12

Slide 12

«A video element is used for playing videos or movies.» HTML specification 4.8.6. – The video element

Slide 13

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 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

HTTP Live Streaming

Slide 18

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 19

Slide 20

Slide 20

Slide 21

Slide 21

Can I Use It?

Slide 22

Slide 22

Slide 23

Slide 23

Usage Instructions Most mobile clients support it Other browsers can learn to use it

Slide 24

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

Slide 25

hls.js Hooks into the Media Source Extensions API It essentially takes the HLS source and transforms it

Slide 26

Slide 26

Implementation

Slide 27

Slide 27

Data Videos hosted at Vimeo HLS manifest retrieved via their API

Slide 28

Slide 28

Handling Play

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

The poster attribute … and why we don’t use it

Slide 33

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

Slide 34

Two Problems Only a single image Shown while no data is available

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Small Gestures Can Go a Long Way

Slide 38

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

Slide 39

Example

Slide 40

Slide 40

One Last Thing

Slide 41

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

Slide 42

We are hiring. Come talk to me, or take a look at https://www.kitchenstories.com/jobs

Slide 43

Slide 43

Thank you. _ovlb oscar.braunert@kitchenstories.com www.kitchenstories.com www.ovl.design