Flash Player with RMTP was the most popular streaming technology. As Flash is fading out, I am going to introduce how to replace it with Video.js player with HTTP Live Stream (HLS)

1. Video.js with HLS
Sunday Ku @ HK OSCON 2018
2018 / 06 / 16 - 17

2. Sunday Ku

3. Agenda
● Live streaming
● RTMP
● HTTP Live Streaming (HLS)
● Video.js
● Demo

4. ● Encode
○ Compress raw video
● Transcode
○ Convert video from an encoding to other
Live streaming
Terms

5. Live streaming
Infrastructure
Encoder
Stream
Server
Raw video encoded
video
transcoded
video

6. RTMP - Real-Time Messaging Protocol
Infrastructure
Origin
Stream
Server
flv with rtmp
Edge
Stream
Server
flv with
rtmp

7. Weakness of RTMP
● Flash player is fading out
● RTMP is not using 80/443 port
● Edge servers are expensive

8. HTTP Live Streaming
● Supported by modern browsers (Flash player is fading out)
● HTTP(S) based (RTMP is not using 80/443 port)
● Can off load to CDN (Edge servers are expensive)
● Built-in adaptive bitrate

9. HLS - HTTP Live Streaming
Infrastructure
Stream
Server
manifest file
(m3u8)
video
segment
(ts)
Content
delivery
network

10. HLS Playlist
HLS - HTTP Live Streaming

11. HLS Stream
HLS - HTTP Live Streaming

12. Video.JS

13. Video.js

14. Show me
the code

15. Demonstration
Infrastructure
Stream
Server
OBS
Reverse
Proxy
flv with
rtmp
HLS

16. We Love to Share
Mole Wong
Data Pipeline with
Apache Kafka
Day 1 17:40
Conference Hall 4-5
Sunday Ku
Video.js with HLS
Day 2 12:30
Conference Hall 4-5
Ivan Ha
React Async
Rendering - Paradigm
Shift After React Fiber
Day 2 15:10
Conference Hall 6

17. 17https://goo.gl/cbBkG5

18. Q & A