Александр Тоболь, Кадры решают все, или стриминг видео...
DESCRIPTION
Александр расскажет, как им удалось ускорить более чем в 10 раз старт просмотра кино и сериалов с использованием технологий адаптивного стриминга MPEG-DASH и HLS. Вы узнаете, какие технологии попали в поле зрения команды, как инфраструктурные особенности и размер аудитории, а также специфика потребления на разных пользовательских устройствах повлияли на принятие решение о выборе технологии. И, конечно, будет дан подробный отчет о результатах внедрения и полученном эффекте.TRANSCRIPT
![Page 1: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/1.jpg)
«Кадры решают все, или
стриминг видео в
Одноклассниках»
Александр Тоболь
![Page 2: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/2.jpg)
• 10 млн уников в сутки по всему миру• 75 млн просмотров в сутки• 100 тысяч загрузок в день
![Page 3: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/3.jpg)
Видеоплатформа изнутри
temp2storage
persistent2storage
upload2server
download2server
transformation2server
![Page 4: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/4.jpg)
MPEG1/2/4, DivX, h.264, WMV7/8/9, VC-1
COder DECoder
MP3, AAC, OGG Vorbis, DTS
![Page 5: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/5.jpg)
Контейнер
MKV, QuickTime, FLV, 3GP, MP4, .TS
![Page 6: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/6.jpg)
Выбор кодека и контейнера
MP4 H.264 AAC
22
FLV
H.263
MP3
22
WebM
VP8
Vorbis, MP3
22
![Page 7: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/7.jpg)
Трансформация видео
Transformation2server
persistent storage
ffmpeg mp4box2
mp4parser
MP4, H.264, AAC2
144 240, 360, 480
720 1080, 1440
2160
temp storage
Any container/codec22
WxH
![Page 8: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/8.jpg)
Видео изнутри
temp storage
persistent storage
upload server
download server
transformation server
![Page 9: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/9.jpg)
mp4 pseudo-streamingMOOV data1 data2 data N
v1 a1 vN aNv0 a0Fast start
data m
vm am
data N data m
HTTP 2byte-range
request
start time parameter in the request
URL
MOOV data N data m
![Page 10: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/10.jpg)
«Длинный хвост»
![Page 11: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/11.jpg)
Архитектура раздачи
download server
persistent storage
RAM - 96GB
SSD - 4TB
1-й уровень
2-й уровень
Segment256Kb
LRU
FIFO
![Page 12: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/12.jpg)
sendfile vs send
download server
RAM - 96GB1-й уровень
ssize_t send(int sockfd, const void *buf, size_t len, int flags);
ssize_t sendfile(int out_fd, int in_fd, off_t *offset, size_t count);
/dev/shm/cache.memLRU
![Page 13: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/13.jpg)
Производительность раздачи
download
persistent storage
RAM – 96Gb2SSD - 4Tb
eth21 x 10 Gbpseth2
4 x 10 Gbps
80%
20%
![Page 14: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/14.jpg)
Появились видео от блогеров и партнеров - сериалы, шоу, кино
![Page 15: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/15.jpg)
Двухчасовой mp4 фильм в среднем стартует: - 12 секунд в проводных сетях - 21 секунду в мобильных сетях
![Page 16: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/16.jpg)
Header data1 data2 data N data k … …
6 Mb
Что происходит?
![Page 17: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/17.jpg)
- перемотка фильма занимает 6 секунд- 30% буферизаций ведут к закрытию плеера
![Page 18: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/18.jpg)
1. Ускорить старт видео в 2-3 раза
2. Ускорить перемотку в 3-6 раз
3. Уменьшить колличество беферизаций2
4. Решить проблему на мобильных устройствах
Задачи
![Page 19: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/19.jpg)
Автокачество в зависимости от разрешения окна плеера и скорости Интернет
![Page 20: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/20.jpg)
Технологии стриминга
Параметр
кодек любой h264,aacконтейнер MP4, MPEG2-TS MPEG2-TS
flash dash.as
device Android iOS, Android 4 SmartTV
pluginsавтокачество mpd m3u8
HDSHLS
h264,mp3,aacf4m
MPEG-DASH
f4vnative
-
HTML5 Chrome, dash.js Safari -
![Page 22: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/22.jpg)
Dynamic Adaptive Streaming over HTTPHeader data1 data2 data N data k … …
He data1 data2 data N data k … …
MP4
MPEG-DASH
MPEG2-TS
![Page 23: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/23.jpg)
MPEG-DASH manifest
He data1 data2 data N data k … …He data1 data2 data N data k … …He data1 data2 data N data k … …
http://example.com/manifest.mpd 2<MPD xmlns="urn:mpeg:DASH:schema:MPD:2011" mediaPresentationDuration="PT0H3M1.63S" minBufferTime="PT1.5S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"2type="static">2 <Period duration="PT0H3M1.63S" start="PT0S">
144p720p2160p
bandwidth
time
![Page 24: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/24.jpg)
Http Live Streaming
MPEG2 Transport stream
http://example.com/video.m3u8 2#EXTM3U #EXT-X-STREAM-INF:BANDWIDTH=200000 lowest.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=311111 low.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=484444 medium.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=737777 high.m3u8
http://example.com/lowest.m3u8 …
http://example.com/low.m3u8 …
http://example.com/medium.m3u8 …
http://example.com/lowest.m3u8 2#EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:11 #EXTINF:10.083333, high000.ts #EXTINF:9.958333, high001.ts #EXTINF:10.000000, high002.ts …
http://example.com/high000.ts
http://example.com/high001.ts
http://example.com/high002.ts
![Page 25: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/25.jpg)
Простое решение
dash
FFMPEG
Upload FFMPEG
mp4
MP4BOX
hls
10Пб x 3
![Page 26: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/26.jpg)
Экономное решение
dashUpload
persistent storage
mp4
hls
aac
h264
download server
Delta
transformation server
![Page 27: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/27.jpg)
Проблемы HLS1.ts 2.ts N.ts k.ts … …HLS
…MPEG2-TS
40Гбит/сек по 188байт пакет = 26 млн пакетов в сек
![Page 28: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/28.jpg)
Решение
persistent2storage
mp4, h264, aac
Delta
HLS
DASH
![Page 29: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/29.jpg)
MPEG-DASH поток на лету
![Page 30: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/30.jpg)
Кодирование MPEG-DASHHeader data1 data2 data N data k … …
He data1 data2 data N data k … …
He
He Offsets
MP4
DASH
DELTAtransformation
server
![Page 31: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/31.jpg)
Раздача MPEG-DASH
Header data1 data2 data N data k … …
He
He
He data1 data2 data N data k … …
MP4
DELTA
DASH
download server
![Page 32: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/32.jpg)
Проблемы DASH
He data1 data2 data N data k … …
He data1 data2 data N data k … …
720p
2160pfragmented MP4
Header dataMP4
Header data
720p
2160p
Header dataMP4
Header data
720p
2160p
![Page 33: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/33.jpg)
FLASH плеер и MPEG-DASH форматФИЧИ:21. Интерлив видео/аудио22. Замена UrlLoader на UrlStream 23. Доработка алгоритма Автокачества24. Умный ретрай, кеширование sidx25. Умный фронтбуффер26. Работа с частично битым видео 27. Идеальный интерлив меседжей и борьба с хрюканием
Базовая as3 реализация dash https://github.com/castlabs/dashas
![Page 34: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/34.jpg)
HLS поток на лету
![Page 35: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/35.jpg)
Кодирование HLS
mpeg2 fragments
m3u8 playlist
delta
delta index
mp4 FFMPEGFFMPEGUpload
persistent storage
![Page 36: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/36.jpg)
Panda diff
…MPEG2
MP4 …
DELTA
INDEX
![Page 37: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/37.jpg)
Производительность раздачи
download
persistent storage
RAM – 96Gb2SSD - 4Tb
eth21 x 10 Gbpseth2
4 x 10 Gbps
80%
20%
MP4 ~ 40 Гбит/секDASH ~ 40 Гбит/секHLS ~ 10 Гбит/сек
![Page 38: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/38.jpg)
Результаты
![Page 39: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/39.jpg)
Параметр
старый формат (MP4) 2
средняя длина/2 часа
adaptive bitrate streaming MPEG-Dash/HLS
средняя длина/2 часастарт 4 сек/12 сек 1.5 сек
перемотка 4 сек/12 сек 1.3 сек
стоимость хранения - +10%
стоимость раздачи - +20% CPU
Первый кадр в 6 раз быстрее!
![Page 40: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/40.jpg)
Мобильные экраны – смартфоны, планшеты, SmartTV
![Page 41: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/41.jpg)
ИТОГО1. DASH-видео на FLASH2
2. DASH-видео на HTML-5 плеерах на стандартной библиотеке dash.js
3. Автоматически выбор качества в зависимости от разрешения и скорости Интернет2
4. HLS видео в iOS- плеерах и SmartTV 5. Экономное хранение форматов и сохранение
скорости раздачи
![Page 42: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/42.jpg)
Быстрее нас только этот чувак в красном!
Быстрее нас только этот мужчина в болиде!
![Page 43: Александр Тоболь, Кадры решают все, или стриминг видео в Одноклассниках](https://reader035.vdocuments.site/reader035/viewer/2022062708/558c93f6d8b42adb098b4648/html5/thumbnails/43.jpg)
Спасибо