Пытаясь создать возможность воспроизведения потокового видео, я столкнулся с проблемами. Различные браузеры и / или мобильные устройства сталкиваются с различными проблемами при воспроизведении видео / аудио в потоковом режиме.
На данный момент у меня есть следующий комплект:
1) С помощью ffmpeg я разбиваю видео на треки и разбиваю их на фрагменты
2) Я вручную создаю файлы master-m3u8 для дальнейшего воспроизведения
3) Используя mediaelement.js, я пытаюсь воспроизвести полученные видеофайлы с подключением ряда опций.
Итак.
1) С помощью ffmpeg я разбиваю любое входное видео следующим образом:
ffmpeg -i '/home/mishkapetran/Загрузки/Rick.mkv' \
-map 0:v:0 -c:v libx264 -profile:v baseline -preset:v superfast -b:v 1000k -level 3.0 -strict -2 -s 480x360 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_360p -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_360p_video_%d.ts /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_360p_video.m3u8 \
-map 0:v:0 -c:v libx264 -profile:v baseline -preset:v superfast -b:v 1000k -level 3.0 -strict -2 -s 858x480 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_480p -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_480p_video_%d.ts /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_480p_video.m3u8 \
-map 0:v:0 -c:v libx264 -profile:v baseline -preset:v superfast -b:v 1000k -level 3.0 -strict -2 -s 1280x720 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_720p -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_720p_video_%d.ts /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_720p_video.m3u8 \
-map 0:1 -c:a aac -b:a 128k -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_audio_rus -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_rus_audio_%d.aac /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_rus_audio.m3u8 \
-map 0:2 -c:a aac -b:a 128k -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_audio_eng -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_eng_audio_%d.aac /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_eng_audio.m3u8 \
-map 0:3 -f webvtt /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_sub_rus.vtt \
-map 0:4 -f webvtt /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_sub_eng.vtt
2) Поскольку вместе с mediaelement.js в проигрывателе HTML они не могут предоставить параметры для выбора звуковой дорожки, мы создаем несколько файлов master-m3u8, комбинируя различные разрешения и звуковые дорожки, и получается как это
360p_rus.m3u8, 360p_rus.m3u8, 480p_eng.m3u8, 480p_rus.m3u8,720p_eng.m3u8, 720p_rus.m3u8
Внутри они выглядят так:
#EXTM3U
#EXT-X-VERSION:5
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="eng",LANGUAGE="eng",AUTOSELECT=YES,DEFAULT=YES,URI="rick_eng_audio_.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="eng",DEFAULT=NO,FORCED=NO,AUTOSELECT=YES,LANGUAGE="eng",URI="rick_sub_eng.vtt"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="rus",DEFAULT=NO,FORCED=NO,AUTOSELECT=YES,LANGUAGE="rus",URI="rick_sub_rus.vtt"
#EXT-X-STREAM-INF:BANDWIDTH=3000000,CODECS="avc1.42c00d,mp4a.40.2",RESOLUTION=480x360,AUDIO="audio",SUBTITLES="subs"
JKVHKVOF_360p_video.m3u8
3) Поместить все это в index.html
<!DOCTYPE html>
<html>
<head>
<title>Video player</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.9/build/mediaelementplayer.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/quality/quality.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.10/mediaelement-and-player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/quality/quality.min.js"></script>
</head>
<body>
<video id="stream_video_tag" width="800" height="600" controls>
<source src="360p_rus.m3u8" type="application/x-mpegURL" data-quality="360-rus">
<source src="480p_rus.m3u8" type="application/x-mpegURL" data-quality="480-rus">
<source src="720p_rus.m3u8" type="application/x-mpegURL" data-quality="720-rus">
<source src="360p_eng.m3u8" type="application/x-mpegURL" data-quality="360-eng">
<source src="480p_eng.m3u8" type="application/x-mpegURL" data-quality="480-eng">
<source src="720p_eng.m3u8" type="application/x-mpegURL" data-quality="720-eng">
<track src="rick_sub_eng.vtt" srclang="en" label="English" kind="subtitles" type="application/octet-stream">
<track src="rick_sub_rus.vtt" srclang="ru" label="Russian" kind="subtitles" type="application/octet-stream">
</video>
<script type="text/javascript">
window.player = new MediaElementPlayer('stream_video_tag', {
features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen', 'tracks', 'quality'],
defaultVideoWidth: '100%',
defaultVideoHeight: '100%',
defaultAudioWidth: '100%',
defaultAudioHeight: '100%',
loop: false,
success: function () {
console.log("SUCCESS MediaElement");
},
error: function (err) {
console.error("CAN'T PLAY TORRENT MediaElement", err);
}
});
window.player.play();
</script>
</body>
</html>
По результатам 2 задач:
1) В таком виде воспроизводит на всех устройствах кроме андроида. И с переменным успехом проигрывает видео, но не позволяет выбирать между разрешениями, нет полосы и нет звука.
Кроме того, существует нерешенная проблема.
2) Ffmpeg записывает информацию в файл субтитров только после того, как запустил все видео, что означает, что все время перед этим эти файлы были пыльными. Если субтитры также разделены на фрагменты, скорость обработки падает с 2,5x до 0,5x, что недопустимо, и сервер сильно загружен.
Есть идеи, как сделать универсальный метод для всех устройств?