Это третья статья о разработке заградительного плеера с нуля, пожалуйста, ознакомьтесь с предыдущей статьей.Основы потокового видео. Начало работы с MSE и FFmpeg. Создание эскизов предварительного просмотра видео и fmp4.. Играть в органную сетьnplayer.js.org/.
В последней статье MSE была представлена для воспроизведения потокового мультимедиа, но разработка WEB-видео не зависит исключительно от MSE. В этой статье будут представлены два основных протокола HLS и DASH, а также способы создания и использования клиентских библиотек с открытым исходным кодом, поддерживающих эти протоколы, для воспроизведения видео.
HLS
HLS (HTTP Live Streaming) — это протокол потоковой передачи мультимедиа, разработанный Apple, который использует HTTP для передачи видео и может предотвратить его блокировку брандмауэрами. Сейчас используется большинство видеосайтов, таких как Youku, Tencent Video.
Он работает, разделяя весь поток на небольшие файлы на основе HTTP для загрузки по несколько за раз. Во время воспроизведения медиапотока клиент может выбрать загрузку одного и того же ресурса с разной скоростью из множества различных альтернативных источников, позволяя сеансу потоковой передачи адаптироваться к разным скоростям передачи данных.
это создаст.m3u8файл, который, помимо некоторых метаданных, также записывает, где хранится разделенное видео. Разделенное видео.tsконец файла, этоMPEG-2 Transport StreamКонтейнеры, но теперь и HLSподдержка fmp4.
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:4
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.0,
ad0.ts
#EXTINF:8.0,
ad1.ts
#EXT-X-DISCONTINUITY
#EXTINF:10.0,
movieA.ts
#EXTINF:10.0,
movieB.ts
Один.m3u8Файл примерно такой же длины, как указано выше. в файле с#Строка в начале является либо комментарием, либо меткой, а метка начинается с#EXTв начале с учетом регистра.
-
EXTM3UМетка, которую должны содержать файлы M3U8, и она должна находиться в первой строке файла. -
EXT-X-VERSIONВерсия файла M3U8, общая — 3 (текущая самая высокая версия должна быть 7), чем выше версия, тем больше поддерживаемых тегов -
EXT-X-TARGETDURATIONУказана максимальная продолжительность одного медиафайла -
EXT-X-MEDIA-SEQUENCEПорядковый номер первого файла сегмента URL в списке воспроизведения, порядковый номер по умолчанию начинается с 0 -
EXTINFПродолжительность (в секундах) сегмента мультимедиа, указанная последующим URL-адресом -
EXT-X-DISCONTINUITYОбычно используется для вставки рекламы в видеопоток, указывающей, что предыдущий сегмент не совпадает с последним, чтобы клиент мог подготовиться.
сделать
зайти в интернет скачатьвидео, используйте mp4info в Bento4 для просмотра информации о файле следующим образом:
mp4info ./video.mp4
...
Track 1:
flags: 3 ENABLED IN-MOVIE
id: 1
type: Video
duration: 30000 ms
language: und
media:
sample count: 720
timescale: 12288
duration: 368640 (media timescale units)
duration: 30000 (ms)
bitrate (computed): 5860.270 Kbps
display width: 1920.000000
display height: 1080.000000
frame rate (computed): 24.000
Sample Description 0
Coding: avc1 (H.264)
Width: 1920
Height: 1080
Depth: 24
AVC Profile: 100 (High)
AVC Profile Compat: 0
AVC Level: 40
AVC NALU Length Size: 4
AVC SPS: [67640028acd940780227e5c044000003000400000300c03c60c658]
AVC PPS: [68ebe3cb22c0]
Codecs String: avc1.640028
Track 2:
flags: 3 ENABLED IN-MOVIE
id: 2
type: Audio
duration: 30022 ms
language: und
media:
sample count: 1408
timescale: 48000
duration: 1441024 (media timescale units)
duration: 30021 (ms)
bitrate (computed): 192.583 Kbps
Sample Description 0
Coding: mp4a (MPEG-4 Audio)
Stream Type: Audio
Object Type: MPEG-4 Audio
Max Bitrate: 192580
Avg Bitrate: 192580
Buffer Size: 0
Codecs String: mp4a.40.2
MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
MPEG-4 Audio Decoder Config:
Sampling Frequency: 48000
Channels: 6
Sample Rate: 48000
Sample Size: 16
Channels: 2
Вы можете видеть, что этот файл имеет разрешение 1080p, 24 кадра в секунду, битрейт 5860.
ffmpeg -i ./in.mp4 \
-vf scale=w=1280:h=720:force_original_aspect_ratio=decrease,yadif \
-c:a aac -b:a 128k -ar 44100 -ac 2 \
-c:v libx264 -b:v 2500k -maxrate 2675k -bufsize 3000k \
-pix_fmt yuv420p -level 4.1 \
-profile:v high -preset veryfast -crf 20 \
-g 120 -keyint_min 120 \
-sc_threshold 0 \
-threads 0 -muxpreload 0 -muxdelay 0 \
-hls_time 10 -hls_playlist_type vod -hls_list_size 0 \
-f hls -hls_segment_filename '720p_%03d.ts' 720p.m3u8
Запустите указанную выше команду, чтобыmp4Перевести вm3u8формат.
fmpeg -hide_banner -i ./720p_000.ts # 使用 ffmepg 查看一下切片信息，可以看到信息和上面命令指定的一样
Input #0, mpegts, from './720p_000.ts':
Duration: 00:00:10.02, start: 0.060111, bitrate: 2095 kb/s
Program 1
Metadata:
service_name : Service01
service_provider: FFmpeg
Stream #0:0[0x100]: Video: h264 (Main) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 24 fps, 24 tbr, 90k tbn, 48 tbc
Stream #0:1[0x101](und): Audio: aac (LC) ([15][0][0][0] / 0x000F), 44100 Hz, 5.1, fltp, 134 kb/s
| параметр | описывать |
|---|---|
| -vf | за фильтром,scaleУправляет разрешением, здесь оно становится видео 720p с исходным соотношением сторон, yadif заставляет видео использовать прогрессивную развертку |
| -c:a -b:a -ar -ac -c:v | Кодирование аудио, битрейт аудио, частота дискретизации аудио, количество аудиоканалов, битрейт видео |
| -b:v -maxrate -bufsize | Битрейт, максимальный битрейт, размер кэша. настраиватьmaxrateа также-b:vНе то же самое, можно запустить VBR, установитьbufsizeЭто сделано для того, чтобы распределение битрейта было более равномерным, чем меньше значение, тем выше частота проверки и тем хуже качество изображения. Общие настройкиmaxrateот одного до двух раз |
| pix_fmt | изменить формат пикселей |
| level | Уровень кодирования, самый высокий уровень подачи на станции Б — 4.1, а некоторые устройства могут зависать при воспроизведении. |
| profile:v | кодовый файл, даbaseline main high.highлучше качество,mainлучшая совместимость |
| preset |
h.264по умолчанию, потому чтоh.264Элементов конфигурации слишком много, поэтому вот несколько предустановленных значенийultrafast superfast veryfast faster fast medium slow slower veryslowЧем выше значение, тем лучше качество, но ниже скорость кодирования.medium
|
| crf | Целевое качество видео, 0 означает без потерь, по умолчанию 23, чем ниже качество, тем лучше, лучше не ставить больше 30 |
| g keyint_min | Контролируйте генерацию ключевых кадров, потому что видео нужно сегментировать, поэтому время генерации ключевого слова меньше, чем продолжительность сегмента, поскольку 24 кадра в секунду, настройка 120 означает, что ключевой кадр генерируется примерно каждые 5 секунд. |
| sc_threshold 0 | Ключевые кадры не генерируются автоматически при преобразовании сцен |
| threads 0 | Автоматически включать многопоточность на основе ядер компьютера |
| muxpreload muxdelay | Установите начальную и максимальную задержку демультиплексирования, здесь установлено значение 0, чтобы продолжительность сегмента строго зависела от установленной продолжительности. |
| hls_time | Длинный сегмент, по запросу рекомендуется hls 10 секунд |
| hls_playlist_type | Тип hls установлен на тип по запросу |
| hls_list_size 0 | Неограниченная длина плейлиста |
| -f hls -hls_segment_filename | тип вывода, имя фрагмента |
hls поддерживает автоматическую адаптацию битрейта и автоматически переключает разрешение в соответствии с текущим состоянием сети.Мы можем создавать различные видео с разным битрейтом, чтобы hls автоматически переключался.
ffmpeg -threads 0 -vsync 1 -i .\video.mp4 \
-lavfi '[0] scale=854:480[ed],[0] scale=1280:720[hd],[0] scale=1920:1080[fhd]' \
-c:v libx264 -c:a aac -b:v:0 1400k -b:a:0 128k -b:v:1 2800k -b:a:1 128k -b:v:2 5000k -b:a:2 192k \
-map '[ed]' -map 0:a -map '[hd]' -map 0:a -map '[fhd]' -map 0:a \
-f hls -var_stream_map 'v:0,a:0,name:480p v:1,a:1,name:720p v:2,a:2,name:1080p' \
-master_pl_name master.m3u8 \
-hls_time 10 -hls_playlist_type vod -hls_list_size 0 \
-hls_segment_filename '%v_%03d.ts' %v.m3u8
Для упрощения некоторые параметры не настраиваются, и выполнение приведенной выше команды может сгенерировать 3 разных разрешения.m3u8файлы, и тот, который объединяет их вместеm3u8файл, hls через два слояm3u8для достижения адаптивного битрейта.
--- 文件：master.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=1680800,RESOLUTION=854x480,CODECS="avc1.64001e,mp4a.40.2"
480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3220800,RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2"
720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5711200,RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2"
1080p.m3u8
| параметр | описывать |
|---|---|
| -vsync 1 | Сохраняйте постоянный fps, меньше дублирования, больше отбрасывания |
| -lavfi | Сложный фильтр с несколькими входами и несколькими выходами, где квадратные скобки используются для выбора потоков и меток. |
| -map | Для ручного выбора потоков здесь используйте метку для выбора потоков |
| -var_stream_map | Пользовательская комбинация потоков, окончательный выходной файл должен содержать%v, используется здесьnameприсвоить ему значимое значение |
| -master_pl_name | хозяинm3u8имя |
Ниже приведены рекомендуемые битрейты для разных разрешений.
| Quality | Resolution | bitrate - low motion | bitrate - high motion | audio bitrate |
|---|---|---|---|---|
| 240p | 426x240 | 400k | 600k | 64k |
| 360p | 640x360 | 700k | 900k | 96k |
| 480p | 854x480 | 1250k | 1600k | 128k |
| HD 720p | 1280x720 | 2500k | 3200k | 128k |
| HD 720p 60fps | 1280x720 | 3500k | 4400k | 128k |
| Full HD 1080p | 1920x1080 | 4500k | 5300k | 192k |
| Full HD 1080p 60fps | 1920x1080 | 5800k | 7400k | 192k |
| 4k | 3840x2160 | 14000k | 18200 | 192k |
| 4k 60fps | 3840x2160 | 23000k | 29500k | 192k |
Ниже приведены рекомендуемые настройки для загрузки видео на Youtube и на станцию B.
Разделение аудио и видео
Как правило, видео-сайты разделяют аудио и видео, что имеет много преимуществ, таких как:
- Если видео имеет несколько версий на разных языках, возможно переключение языка видео в режиме реального времени.
- Больше экономии места, например, несколько видео с разным битрейтом используют звук с одинаковым битрейтом.
- Лучшая совместимость, некоторые устройства будут иметь некоторые проблемы с воспроизведением файлов, содержащих видео и аудио, например, без звука.
Однако компонентное аудио и видео также значительно увеличивает сложность, например, как выбрать аудио и видео, подходящие для скорости передачи данных, и синхронизировать аудио и видео во время воспроизведения.
Видео имеет DTS (временная метка декодирования, сообщающая проигрывателю, когда декодировать данные этого кадра), PTS (отображаемая временная метка, сообщающая проигрывателю, когда отображать данные этого кадра). Воспроизведение звука также имеет концепцию DTS и PTS, но звук не похож на B-кадры в видео и не требует двунаправленного предсказания, поэтому порядок DTS и PTS аудиокадров согласован. Поэтому необходимо контролировать воспроизведение видео и аудио, иначе возникнет несоответствие звука и изображения.
ffmpeg -threads 0 -vsync 1 -i .\video.mp4 \
-lavfi '[0] scale=1280:720[hd],[0] scale=1920:1080[fhd]' \
-c:v libx264 -c:a aac -b:v:0 2800k -b:a:0 128k -b:v:1 5000k -b:a:1 192k \
-map '[hd]' -map 0:a -map '[fhd]' -map 0:a \
-var_stream_map 'v:0,agroup:hd,name:video_hd a:0,agroup:hd,name:audio_hd v:1,agroup:fhd,name:video_fhd a:1,agroup:fhd,name:audio_fhd' \
-f hls -master_pl_name master.m3u8 \
-ar 44100 -ac 2 \
-g 120 -keyint_min 120 -sc_threshold 0 -muxpreload 0 -muxdelay 0 \
-hls_time 10 -hls_flags single_file -hls_playlist_type vod -hls_list_size 0 \
-hls_segment_type fmp4 -hls_segment_filename '%v.mp4' %v.m3u8
Приведенная выше команда создаст файл HLS с отдельными звуком и видео.
--- 文件：master.m3u8
#EXTM3U
#EXT-X-VERSION:7
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="group_hd",NAME="audio_1",DEFAULT=YES,URI="audio_hd.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="group_fhd",NAME="audio_3",DEFAULT=YES,URI="audio_fhd.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=3220800,RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2",AUDIO="group_hd"
video_hd.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=140800,CODECS="mp4a.40.2",AUDIO="group_hd"
audio_hd.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5711200,RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2",AUDIO="group_fhd"
video_fhd.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=211200,CODECS="mp4a.40.2",AUDIO="group_fhd"
audio_fhd.m3u8
--- 文件：video_hd.m3u8
#EXTM3U
#EXT-X-VERSION:7
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-MAP:URI="video_hd.mp4",BYTERANGE="827@0"
#EXTINF:10.000000,
#EXT-X-BYTERANGE:4341047@827
video_hd.mp4
#EXTINF:10.000000,
#EXT-X-BYTERANGE:2573385@4341874
video_hd.mp4
#EXTINF:10.000000,
#EXT-X-BYTERANGE:4398334@6915259
video_hd.mp4
#EXT-X-ENDLIST
использовать выше-hls_flags single_fileРазрешить hls использовать диапазон HTTP для запроса сегментированных данных, не разрезая видео на сегменты,-hls_segment_type fmp4использоватьfmp4вместоts.
hls.js
Теперь, когда мы создали видео в формате hls, его можно воспроизвести в видеоплеере. Все устройства Apple поддерживают hls, поэтому установите его напрямую.videoизsrcдляm3u8файл в порядке. Но для других устройств, которые не поддерживают протокол hls, вы можете использовать его в это время.hls.js.
hls.js — этоtsконтейнер, преобразованный вfmp4, для воспроизведения которого требуется HTML 5 Video и MSE.
npm i -S hls.js # 安装
После установки также требуется сервер статических ресурсов для обработки видеоресурсов.
npm i -g http-server
# 安装好后在视频资源目录下 执行下面命令
http-server --cors -p 8001
Наконец, добавьте следующий код в файл js.
import Hls from 'hls.js'
const video = document.querySelector('video')
const url = 'http://127.0.0.1:8001/master.m3u8'
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url)
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url
video.addEventListener('loadedmetadata', () => {
video.play()
})
}
В случае, если MSE не поддерживается, определяется, поддерживается ли hls нативно, что, скорее всего, Safari IOS (да, MSE пока не поддерживает).
Вы можете увидеть запрос по умолчанию для hd, но когда скорость сети оказывается высокой, фрагмент fhd запрашивается динамически. Также hls.js дляfmp4На этапе тестирования вы можете использовать более общийtsформат заменен.
Доступ к базовому URL-адресу файла можно получить черезhls_base_urlСпецификация параметров, файл воспроизведения по умолчанию может быть передан черезvar_stream_mapизdefault:yesнастраивать.
Приведенный выше пример очень простой, подробнее о hls.js можно посмотретьофициальная документация.
Использование Nplayer
Конечно, мы также можем использовать тот, который был сделан в первой статье.Видеоплеер для чата NPlayer Bullet.
const player = new Player()
const hls = new Hls();
hls.attachMedia(player.video)
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
player.mount(document.body)
Видно, что с поиском видео и видеобуфером проблем нет, проигрывается нормально, как и обычные видеофайлы. Больше, пожалуйста, проверьтеnplayer.js.org/.
DASH
Динамическая адаптивная потоковая передача через HTTP (DASH, также известная как MPEG-DASH) — это технология потоковой передачи с адаптивной скоростью передачи данных, которая позволяет передавать высококачественные потоковые мультимедийные данные через Интернет через традиционные веб-серверы HTTP.
DASH и HLS очень похожи, оба используютmanifestОпишите информацию о видео и плейлистах, а затем запросите соответствующие сегменты через адаптивный HTTP.
В отличие от HLS, DashМеждународный стандарт, а HLS принадлежит Apple. А DASH поддерживает любую кодировку, ее можно использовать сvp9закодированныйwebmформат видео. В настоящее время DASH используют многие крупные видеосайты, такие как youtube, netflix, bilibili. bilibili тоже написал статьюЗачем использовать DASH.
| поле | описывать |
|---|---|
| Period | Представляет собой сцену или песню, представляющую определенный период времени, в который могут вкрапляться рекламные объявления. |
| AdaptationSet | Информация, описывающая медиапоток, например аудио или видео |
| Representation | Используется для представления различных размеров экрана или битрейта, DASH может выбрать соответствующий файл. Сегменты представления обычно используют один начальный сегмент и несколько обычных сегментов. Существует также форма, которая не имеет отдельного сегмента инициализации, а информация об инициализации включена в каждый сегмент. |
| SegmentBase | реальное аудио или видео |
Индексный файл DASH.mpd(Описание мультимедийной презентации) в концеXMLфайл, конкретное содержимое файла выглядит следующим образом.
<?xml version="1.0"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" profiles="urn:mpeg:dash:profile:full:2011"
minBufferTime="PT1.5S">
<!-- Ad -->
<Period duration="PT30S">
<BaseURL>ad/</BaseURL>
<AdaptationSet mimeType="video/mp2t">
<Representation id="720p" bandwidth="3200000" width="1280" height="720">
<BaseURL>720p.ts</BaseURL>
<SegmentBase>
<RepresentationIndex sourceURL="720p.sidx"/>
</SegmentBase>
</Representation>
<Representation id="1080p" bandwidth="6800000" width="1920"
height="1080">
<BaseURL>1080p.ts</BaseURL>
<SegmentBase>
<RepresentationIndex sourceURL="1080p.sidx"/>
</SegmentBase>
</Representation>
</AdaptationSet>
</Period>
<!-- Normal Content -->
<Period duration="PT10M">
<BaseURL>main/</BaseURL>
<AdaptationSet mimeType="video/mp2t">
<BaseURL>video/</BaseURL>
<Representation id="720p" bandwidth="3200000" width="1280" height="720">
<BaseURL>720p/</BaseURL>
<SegmentList timescale="90000" duration="5400000">
<RepresentationIndex sourceURL="representation-index.sidx"/>
<SegmentURL media="segment-1.ts"/>
<SegmentURL media="segment-2.ts"/>
<!-- 省略 -->
</SegmentList>
</Representation>
<Representation id="1080p" bandwidth="6800000" width="1920"
height="1080">
<BaseURL>1080/</BaseURL>
<SegmentTemplate media="segment-$Number$.ts" timescale="90000">
<RepresentationIndex sourceURL="representation-index.sidx"/>
<SegmentTimeline>
<S t="0" r="9" d="5400000"/>
</SegmentTimeline>
</SegmentTemplate>
</Representation>
</AdaptationSet>
<AdaptationSet mimeType="audio/mp2t">
<BaseURL>audio/</BaseURL>
<Representation id="audio" bandwidth="128000">
<SegmentTemplate media="segment-$Number$.ts" timescale="90000">
<RepresentationIndex sourceURL="representation-index.sidx"/>
<SegmentTimeline>
<S t="0" r="9" d="5400000"/>
</SegmentTimeline>
</SegmentTemplate>
</Representation>
</AdaptationSet>
</Period>
</MPD>
| свойства MPD | описывать |
|---|---|
| profiles | В чем-то похожие на версию HLS, эти клиенты реализуют функции, требуемые профилем.Подробнее см.обратитесь к этому |
| mediaPresentationDuration | продолжительность видео |
| minBufferTime | Минимальное время буферизации |
| type | статический по запросу, динамический в прямом эфире |
| minimumUpdatePeriod | Эксклюзивно для прямой трансляции, по крайней мере, время от времени MPD будет обновляться |
Видно, что mpd гораздо сложнее m3u8, за дополнительной информацией обращайтесьпроверить здесь.
сделать
ffmpeg -i .\video.mp4 \
-lavfi '[0] scale=1280:720[hd],[0] scale=1920:1080[fhd]' \
-c:a aac -c:v libx264 -b:v:0 2800k -b:a:0 128k -b:v:1 5000k -b:a:1 192k \
-map '[hd]' -map 0:a -map '[fhd]' -map 0:a \
-use_timeline 1 -use_template 1 -single_file 1 \
-single_file_name '$Bandwidth$_$RepresentationID$.$ext$' \
-adaptation_sets "id=0,streams=v id=1,streams=a" -f dash out.mpd
<?xml version="1.0" encoding="utf-8"?>
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="urn:mpeg:dash:schema:mpd:2011"
xmlns:xlink="http://www.w3.org/1999/xlink"
xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011 http://standards.iso.org/ittf/PubliclyAvailableStandards/MPEG-DASH_schema_files/DASH-MPD.xsd"
profiles="urn:mpeg:dash:profile:isoff-live:2011"
type="static"
mediaPresentationDuration="PT30.0S"
minBufferTime="PT14.5S">
<ProgramInformation>
</ProgramInformation>
<Period id="0" start="PT0.0S">
<AdaptationSet id="0" contentType="video" segmentAlignment="true" bitstreamSwitching="true" frameRate="24/1" maxWidth="1920" maxHeight="1080" par="16:9">
<Representation id="0" mimeType="video/mp4" codecs="avc1.64001f" bandwidth="2800000" width="1280" height="720" sar="1:1">
<BaseURL>2800000_0.mp4</BaseURL>
<SegmentList timescale="1000000" duration="5000000" startNumber="1">
<Initialization range="0-814" />
<SegmentURL mediaRange="815-4481448" indexRange="815-866" />
<!-- 省略 -->
</SegmentList>
</Representation>
<Representation id="2" mimeType="video/mp4" codecs="avc1.640028" bandwidth="5000000" width="1920" height="1080" sar="1:1">
<BaseURL>5000000_2.mp4</BaseURL>
<SegmentList timescale="1000000" duration="5000000" startNumber="1">
<Initialization range="0-815" />
<SegmentURL mediaRange="816-8928627" indexRange="816-867" />
<!-- 省略 -->
</SegmentList>
</Representation>
</AdaptationSet>
<AdaptationSet id="1" contentType="audio" segmentAlignment="true" bitstreamSwitching="true" lang="und">
<Representation id="1" mimeType="audio/mp4" codecs="mp4a.40.2" bandwidth="128000" audioSamplingRate="48000">
<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="6" />
<BaseURL>128000_1.mp4</BaseURL>
<SegmentList timescale="1000000" duration="5000000" startNumber="1">
<Initialization range="0-744" />
<SegmentURL mediaRange="745-83275" indexRange="745-796" />
<!-- 省略 -->
</SegmentList>
</Representation>
<Representation id="3" mimeType="audio/mp4" codecs="mp4a.40.2" bandwidth="192000" audioSamplingRate="48000">
<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="6" />
<BaseURL>192000_3.mp4</BaseURL>
<SegmentList timescale="1000000" duration="5000000" startNumber="1">
<Initialization range="0-744" />
<SegmentURL mediaRange="745-125638" indexRange="745-796" />
<!-- 省略 -->
</SegmentList>
</Representation>
</AdaptationSet>
</Period>
</MPD>
| параметр | описывать |
|---|---|
| -use_timeline 1 | Использование SegmentTimeline в SegmentTemplate |
| -use_template 1 | Используйте SegmentTemplate вместо SegmentList |
| -adaptation_sets | Разделите на несколько AdaptationSets, установите его идентификатор здесь и используйте этот поток |
dash.js
Для игры в браузере вы можете использоватьdash.js. Он также основан на MSE.
Как и в случае с HLS, установите dashjs и запустите сервер статических ресурсов.
npm i -S dashjs # 注意不是 .js
# 在资源文件夹下，执行下面命令
http-server --cors -p 8001
import dash from 'dashjs'
dash
.MediaPlayer()
.create()
.initialize(
document.querySelector('video'),
'http://127.0.0.1:8001/out.mpd',
true // 自动播放
)
Видно, что когда сетевое окружение считается хорошим, автоматически запрашиваются фрагменты с высокой скоростью передачи данных. Подробнее о dash.js см.официальная документация.
Суммировать
В этой статье представлены два основных протокола для воспроизведения веб-видео. Но поскольку HLS появился раньше, проще и поддерживается Apple, сейчас он используется чаще, чем DASH, и все они основаны на MSE, который не поддерживает IE 10 и ниже. Таким образом, браузерам с более низкими версиями может потребоваться понизить версию, чтобы напрямую использовать обычные видеофайлы mp4 или использоватьflashиграть. Конечно, есть также много веб-сайтов, предполагающих, что версия браузера слишком низкая.
- Официальный сайт:nplayer.js.org
- Исходный код:GitHub.com/i-open/np-spicy…
- Онлайн-редактирование и предварительный просмотр:код sandbox.io/is/ancient-is…
Статьи по Теме
- NPlayer поддерживает любой видеоплеер для потоковой передачи мультимедиа и возможности заграждения Bilibili.
- Разработать заградительный видеоплеер с нуля 1
- Основы потокового видео. Начало работы с MSE и FFmpeg. Создание эскизов предварительного просмотра видео и fmp4.