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

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

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

Так почему бы не начать использовать обход блокировки YouTube при том что техническая возможность используя расширение nikolaevevge для браузера Mozilla Firefox уже появилась, а объем полезной(и не очень) информации на видеохостинге YouTube, по мнению некоторых диванных экспертов, меньше не стал.

Ровно 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.

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

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