Разбиение видеофайле в формате mp4 на ts и формирование файла листа m3u8 с использованием ffmpeg и последующее воспроизведение в браузере(DOM-элемент video)

Гобелен - кликните для возврата на главную

Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.

Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Владимира Вольфовича Жириновского.

Как бы не обстояли дела в области культуры и IT-технологий, Самосвал писал статьи на связанные темы и планирует ещё написать.

На очередном конкурсе танцев, школьница отлично выступила.

Вот та самая информация: программа для продвижения канала YouTube, эта информация выложена уже несколько лет, при этом просмотров не много, а метод который описан в данном видео действительно помогает продвигать видео в YouTube.

Начал разбираться с информацией которая находится в HTTPS клиентском запросе рукопожатия.

Обратите внимание! Объект изображённый на гобилене может отличаться от общепринятого вида описанного объекта. Тут дело в том что художник видит именно так!

104 549 руб.

Описание товара

Сначала напишу что сработало

Разбиение mp4 видеофайла на фрагменты осуществлялось следующей командой.

bash
    
ffmpeg -i vzglyad3.mp4 -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p -c:a aac -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename "output_%03d.ts" -movflags +faststart playlist.m3u8

В следующем HTML коде фидеофайты находятся в папке videoparts относительно файла в котором сам HTML. Фрагменты видео так же находятся в папке videoparts.

HTML
    
<!DOCTYPE html>
<html>
<head>
    <title>HLS Video Player</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
        video { width: 100%; max-width: 800px; }
        #status { font-family: monospace; padding: 10px; background: #f0f0f0; }
    </style>
</head>
<body>
    <video id="video" controls></video>
    <div id="status">Initializing HLS player...</div>
      
    <script>
        const video = document.getElementById('video');
        const status = document.getElementById('status');
        
        function updateStatus(msg) {
            status.textContent = msg;
            console.log(msg);
        }
      
        if (Hls.isSupported()) {
            const hls = new Hls({
                maxBufferLength: 30,
                maxMaxBufferLength: 600,
                maxBufferSize: 60*1000*1000,
                maxBufferHole: 0.5,
                lowLatencyMode: false
            });
            
            hls.loadSource('videopart/playlist.m3u8');
            hls.attachMedia(video);
            
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                updateStatus(`HLS ready! Duration: ${video.duration.toFixed(2)}s`);
                video.play().catch(e => updateStatus(`Play error: ${e.message}`));
            });
            
            hls.on(Hls.Events.ERROR, (event, data) => {
                if (data.fatal) {
                    switch(data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            updateStatus("Network error, retrying...");
                            hls.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            updateStatus("Media error, recovering...");
                            hls.recoverMediaError();
                            break;
                        default:
                            hls.destroy();
                            updateStatus("Fatal error, player destroyed");
                    }
                }
            });
            
            video.addEventListener('loadedmetadata', () => {
                updateStatus(`Metadata loaded, duration: ${video.duration.toFixed(2)}s`);
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            // Для Safari (нативный HLS)
            video.src = 'playlist.m3u8';
            video.addEventListener('loadedmetadata', () => {
                updateStatus(`Native HLS, duration: ${video.duration.toFixed(2)}s`);
            });
        } else {
            updateStatus("HLS not supported in this browser");
        }
    </script>
</body>
</html>

Прочая информация по теме, как проверенная так и не проверенная(включая HTML что приведён выше)

Далее идёт продолжение темы, с началом которой можно ознакомиться по ссылке.

Вот результат: ffprobe -v error -show_format -show_streams output_part000.mp4

bash
    
[STREAM]
index=0
codec_name=h264
codec_long_name=H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10
profile=High
codec_type=video
codec_time_base=1001/60000
codec_tag_string=avc1
codec_tag=0x31637661
width=1080
height=1920
coded_width=1080
coded_height=1920
has_b_frames=2
sample_aspect_ratio=1:1
display_aspect_ratio=9:16
pix_fmt=yuv420p
level=40
color_range=unknown
color_space=unknown
color_transfer=unknown
color_primaries=unknown
chroma_location=left
field_order=unknown
timecode=N/A
refs=1
is_avc=true
nal_length_size=4
id=N/A
r_frame_rate=30000/1001
avg_frame_rate=30000/1001
time_base=1/30000
start_pts=1980
start_time=0.066000
duration_ts=302280
duration=10.076000
bit_rate=3341418
max_bit_rate=N/A
bits_per_raw_sample=8
nb_frames=300
nb_read_frames=N/A
nb_read_packets=N/A
DISPOSITION:default=1
DISPOSITION:dub=0
DISPOSITION:original=0
DISPOSITION:comment=0
DISPOSITION:lyrics=0
DISPOSITION:karaoke=0
DISPOSITION:forced=0
DISPOSITION:hearing_impaired=0
DISPOSITION:visual_impaired=0
DISPOSITION:clean_effects=0
DISPOSITION:attached_pic=0
DISPOSITION:timed_thumbnails=0
TAG:language=und
TAG:handler_name=VideoHandler
[/STREAM]
[STREAM]
index=1
codec_name=aac
codec_long_name=AAC (Advanced Audio Coding)
profile=LC
codec_type=audio
codec_time_base=1/44100
codec_tag_string=mp4a
codec_tag=0x6134706d
sample_fmt=fltp
sample_rate=44100
channels=2
channel_layout=stereo
bits_per_sample=0
id=N/A
r_frame_rate=0/0
avg_frame_rate=0/0
time_base=1/44100
start_pts=1896
start_time=0.042993
duration_ts=442235
duration=10.028005
bit_rate=134263
max_bit_rate=134263
bits_per_raw_sample=N/A
nb_frames=430
nb_read_frames=N/A
nb_read_packets=N/A
DISPOSITION:default=1
DISPOSITION:dub=0
DISPOSITION:original=0
DISPOSITION:comment=0
DISPOSITION:lyrics=0
DISPOSITION:karaoke=0
DISPOSITION:forced=0
DISPOSITION:hearing_impaired=0
DISPOSITION:visual_impaired=0
DISPOSITION:clean_effects=0
DISPOSITION:attached_pic=0
DISPOSITION:timed_thumbnails=0
TAG:language=und
TAG:handler_name=SoundHandler
[/STREAM]
[FORMAT]
filename=output_part000.mp4
nb_streams=2
nb_programs=0
format_name=mov,mp4,m4a,3gp,3g2,mj2
format_long_name=QuickTime / MOV
start_time=0.042993
duration=10.010000
size=4360721
bit_rate=3485091
probe_score=100
TAG:major_brand=isom
TAG:minor_version=512
TAG:compatible_brands=isomiso2avc1mp41
TAG:encoder=Lavf57.83.100
[/FORMAT]

В браузере по прежнему не зависимо от загружаемой части время у элемента видео 10 секунд. Предлагаю оставить вариант с частями mp4 файла и попробовать вариант m3u8 часто применяемый на различных сайтах предоставляющих функции публикации и просмотра видео. Переход на HLS (m3u8) действительно может решить проблему. Вот полное решение:

1. Конвертация в HLS (m3u8) с сегментами TS bash ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p \ -c:a aac -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 \ -hls_segment_filename "output_%03d.ts" -hls_flags single_file+split_by_time \ -movflags +faststart playlist.m3u8 Ключевые параметры: -hls_time 10 - длительность сегментов (сек) -hls_list_size 0 - бесконечный плейлист single_file+split_by_time - оптимальный режим сегментации 2. HTML-плеер с HLS.js html HLS Video Player
Initializing HLS player...
Преимущества HLS решения: Автоматическая обработка сегментов: Правильное объединение временных меток Корректное отображение полной длительности Адаптивность: Поддержка разных качеств (если добавить варианты) Плавное переключение между сегментами Надежность: Встроенные механизмы восстановления после ошибок Буферизация и предзагрузка Совместимость: Работает на всех современных браузерах Поддержка мобильных устройств Дополнительные настройки для улучшения: Для много битрейтового потока:
bash
    
ffmpeg -i input.mp4 \
  -map 0 -c:v libx264 -crf 22 -preset veryfast \
  -c:a aac -ar 44100 -ac 2 \
  -f hls -hls_time 4 -hls_list_size 0 -hls_playlist_type event \
  -master_pl_name master.m3u8 \
  -var_stream_map "v:0,a:0 v:1,a:1" \
  -hls_segment_filename "v%v/segment_%03d.ts" \
  v%v/playlist.m3u8

Для DRM защиты можно добавить: -hls_key_info_file keyinfo.txt

Это решение гарантированно будет работать с правильным отображением длительности и плавным воспроизведением, в отличие от ручного объединения MP4 сегментов через MediaSource.

Верните в следующем ответе эту команду в одну строку:

bash
    ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p \
-c:a aac -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 \
-hls_segment_filename "output_%03d.ts" -hls_flags single_file+split_by_time \
-movflags +faststart playlist.m3u8

Вот команда в одну строку:

bash ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p -c:a aac -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename "output_%03d.ts" -hls_flags single_file+split_by_time -movflags +faststart playlist.m3u8 Или более компактный вариант (без изменения функциональности): bash ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p -c:a aac -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename "output_%03d.ts" -hls_flags single_file+split_by_time -movflags +faststart playlist.m3u8 Обе команды абсолютно идентичны по функциональности, просто вторая более компактная. Сработает ли в браузере не пробовал, получился 1 файл ts. Есть сомнения что он должен быть единственный. Вот что в m3u8: #EXTM3U #EXT-X-VERSION:4 #EXT-X-TARGETDURATION:11 #EXT-X-MEDIA-SEQUENCE:0 #EXTINF:9.976633, #EXT-X-BYTERANGE:4086556@0 output_%03d.ts #EXTINF:10.043367, #EXT-X-BYTERANGE:4593028@4086556 output_%03d.ts #EXTINF:9.943267, #EXT-X-BYTERANGE:4791932@8679584 output_%03d.ts #EXTINF:10.043367, #EXT-X-BYTERANGE:4886120@13471516 output_%03d.ts #EXTINF:10.010000, #EXT-X-BYTERANGE:4738540@18357636 output_%03d.ts #EXTINF:10.010000, #EXT-X-BYTERANGE:4041624@23096176 output_%03d.ts #EXTINF:9.976633, #EXT-X-BYTERANGE:5725352@27137800 output_%03d.ts #EXTINF:9.976633, #EXT-X-BYTERANGE:6262844@32863152 output_%03d.ts #EXTINF:6.873533, #EXT-X-BYTERANGE:3701720@39125996 output_%03d.ts #EXT-X-ENDLIST

Вы правы - такой вариант с единым TS-файлом и фрагментами через BYTERANGE не будет корректно работать в браузерах. Давайте исправим команду для создания отдельных TS-сегментов:

Правильная команда для генерации HLS:

bash
    
ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p -c:a aac -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename "output_%03d.ts" -movflags +faststart playlist.m3u8

Ключевые изменения:

Убрали -hls_flags single_file+split_by_time - это создавало один файл с фрагментами

Теперь будут созданы отдельные .ts файлы для каждого сегмента

Ожидаемая структура файлов:

Файл playlist.m3u8

    
output_000.ts
output_001.ts
output_002.ts
...
Корректный пример m3u8 плейлиста:
m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:9.976633,
output_000.ts
#EXTINF:10.043367,
output_001.ts
#EXTINF:9.943267,
output_002.ts
...
#EXT-X-ENDLIST

Дополнительные рекомендации:

Для веб-сервера добавьте MIME-типы:

  • .ts - video/mp2t
  • .m3u8 - application/x-mpegURL

Проверьте CORS-заголовки если загружаете с другого домена

Для тестирования можно использовать локальный сервер:

bash
    
python3 -m http.server 8000

Этот вариант гарантированно будет работать во всех современных браузерах через hls.js или нативный HLS (Safari). Каждый сегмент будет самостоятельным TS-файлом, что правильно для HLS.

Другие товары

Вы так же можете прочитать следующие статьи: