I will cover the main aspects of preparing media resources and implementation of their streaming using famous approaches of media giants. I've been interested in this topic because working with media is a great challenge for every web developer.

1. Summer. Sea. JavaScript.
Buryachkovskiy
Denis
The Age of Data
Streaming

2. What have we had?
Adobe Flash Player ©
Computer software for
using content created on
Adobe Flash platform

3. What now?
HTML5
A software solution stack
that defines the properties
and behaviors of web page
content by implementing a
markup-based pattern to it

4. Simple solution we have

5. DEMO

6. Pros&Cons
Pros:
- Browser controls
everything
Cons:
- We don’t have
flexibility of how to
get the video
- We don’t control over
the source during the
playback

7. Meet the full power of
HTML5 <3

8. Media Source Extensions
(MSE)

9. NODE DEMO

10. Adding a source

11. DEMO

12. Codecs

13. A codec is a device or computer program which
encodes or decodes a digital data stream or signal.
Codec is a portmanteau of coder-decoder

14. ffmpeg -i input.anything

15. mp4info input.anything

16. DEMO

17. (MP4) H.264 (AVC)
(MP4) H.265 (HEVC)
(WEBM) VP8
(WEBM) AV1
(WEBM) VP9
(OGG) Theora

18. H.265 (HEVC)
.MP4
file name
container
compress algorithm human-readable name
video

19. Containers

20. A container or wrapper format is a metafile format
whose specification describes how different
elements of data and metadata coexist in a
computer file

21. .MP4
is
🥡 that has
📹
video
🎧
audio
📜
subtitles

22. You’ve found mp4. So what?

23. Fragmentation

24. .mp4 needs to be “fragmented” to
ISO BMFF Byte Stream Format
Fragmentation

25. mp4fragment any.mp4 any-fragmented.mp4
Fragmentation

26. DEMO

27. Fragmentation

28. Buffering/Segmentation

29. Buffering
What is this?

30. Using byte ranges

31. Byte ranges setting

32. Segments
Segment
1
~2.014s
0-73149
bytes
Segment
2
~2.014s
73150-1
46298
bytes
Segment
3
~2.014s
146299-
219447
bytes

33. DEMO

34. Adaptive Streaming

35. Why so nervous?
🤓 📺 ⏳+ +
=
🤯😡

36. DASH
Data Adaptive Streaming over HTTP

37. Who uses DASH?

38. DEMO

39. Try to be a good front-end 😎