задний план
Как фронтенд-разработчик, я всегда считал, что в вебе мы почти всесильны.
Два дня назад моя девушка спросила меня, как скачать видео на сайте, я подумал про себя, что пора притворяться, поэтому я схватил мышку, щелкнул правой кнопкой мыши по знакомому элементу, чтобы просмотреть элемент, щелкнул видеофайл и нашел соответствующую ссылку на видео mp4, щелкните правой кнопкой мыши Ctrl + S за один раз
Тогда подождите, пока она продолжит делать вам комплименты, хахахаха.
Затем я повернул голову и ушел
Неожиданно она снова подошла ко мне через некоторое время и спросила, как скачать это видео прямо сейчас.
Я сказал разве я не говорил тебе только что, она сказала: у меня есть только ты, зачем учиться этим вещам😶
Я....
Итак, я нагло взял мышь, тот же элемент обзора, и искал ссылку mp4, но обнаружил, что ошибся, ссылка на видео не mp4, не ссылка mp4, а файл потока blob, файл потока не может быть открыт непосредственно, как показано на рисунке
я была в панике...
Решать проблему
Чтобы поддерживать свой всемогущий образ, я начал бесконечный процесс поиска информации, а о соответствующей информации я узнал позже.
HLS
Прежде чем понять, как загружать файлы BLOB-объектов, мы должны сначала понять, что такое HLS.
HLSдляHTTP Live StreamingАббревиатура , представляет собой протокол сетевой передачи потокового мультимедиа на основе HTTP, предложенный Apple, который может поддерживать как прямую трансляцию, так и по запросу, а также мульти-определение, аудио и видео с двумя дорожками, субтитры и другие функции. Его принцип состоит в том, чтобы разделить целое видео на несколько небольших видеороликов, а полное воспроизведение осуществляется путем сращивания этих сегментов один за другим.
Весь рабочий процесс HLS выглядит следующим образом:
- Собирайте аудио и видео файлы
- Сервер кодирует аудио- и видеофайлы и передает закодированные файлы в слайсер.
- Слайсер создает аудио- и видеоиндексные файлы и видеофайлы ts.Индексный файл представляет собой упорядоченный список мультитерминальных видеофайлов, а видеофайл ts представляет собой видеосегмент после того, как слайсер нарезает все видео.
- Клиент запрашивает индексный файл и файл ts на сервере, а браузер находит видеоклип для воспроизведения через индексный файл.
M3U8
Что такое M3U8? M3U8 – это формат файла, который реализует третий этап описанного выше HLS. Давайте посмотрим, что находится в файле M3U8. Ниже приведено содержимое индексного файла M3U8, найденного на веб-странице Tencent Video. Для удобства читая, я комментирую значение каждой строки в коде
#EXTM3U 表示文件格式的类型 是M3U类型
#EXT-X-VERSION:3 指示播放列表的兼容版本，当前为3
#EXT-X-MEDIA-SEQUENCE:0 代表的是视频索引起始值是从0开始的
#EXT-X-TARGETDURATION:13 代表每个播放片段的最大时长是13秒，当前索引文件内容的所有视频都不超过13秒
#EXT-X-PLAYLIST-TYPE:VOD 当前值为VOD，表示服务器不能改变索引文件；如果是EVENT，则0服务器不能改变或是删除索引文件中的任何部分，但是可以向该文件中增加新的一行内容。
#EXTINF:12.000, 当前片段的时长
00_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=0&start=0&end=12000&brs=0&bre=423187&ver=4&token=ca69857cfb8aff98abc6336a3ba84967
#当前片段的相对链接
#EXTINF:11.280,
01_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=1&start=12000&end=23280&brs=423188&bre=1023095&ver=4&token=13bcff0fb3cccd71abaaed9d4006c55e
#EXTINF:11.760,
02_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=2&start=23280&end=35040&brs=1023096&bre=1728847&ver=4&token=f4fedc9ebf0286349111995272ac63da
#EXTINF:11.200,
03_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=3&start=35040&end=46240&brs=1728848&bre=2806839&ver=4&token=56755c9b693d440755ad2045962be46e
#EXTINF:10.440,
04_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=4&start=46240&end=56680&brs=2806840&bre=3643439&ver=4&token=7b1784945ade50bc0574d6b121175c38
#EXTINF:12.000,
05_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=5&start=56680&end=68680&brs=3643440&bre=4215523&ver=4&token=581f5a4a22d896f81ba600b451fa01b5
#EXTINF:10.480,
06_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=6&start=68680&end=79160&brs=4215524&bre=4800391&ver=4&token=5b1150dcbf43991c64d43cfd9c97026a
#EXTINF:10.840,
07_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=7&start=79160&end=90000&brs=4800392&bre=5464595&ver=4&token=748e5834a6980c1baa799272c1fe8871
#EXTINF:11.440,
08_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=8&start=90000&end=101440&brs=5464596&bre=5981595&ver=4&token=1ad56a68e98cdbc90770a9c15978f86e
#EXTINF:10.360,
09_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=9&start=101440&end=111800&brs=5981596&bre=6908059&ver=4&token=4e7674db60e90a19c86bd93fb02d1b93
#EXTINF:11.360,
010_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=10&start=111800&end=123160&brs=6908060&bre=8275195&ver=4&token=d822f1af441ea0e1ff36ee3392f5b45f
#EXTINF:11.960,
011_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=11&start=123160&end=135120&brs=8275196&bre=9496819&ver=4&token=c1a49eebde9abce2aec69c42e5693834
#EXTINF:12.000,
012_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=12&start=135120&end=147120&brs=9496820&bre=10699267&ver=4&token=02ae773935016abadce71ed2b2f1cc50
#EXTINF:5.648,
013_gzc_1000102_0b53pqaasaaabmacsxdfi5q4a7gdbf3qadka.f321002.1.ts?index=13&start=147120&end=152768&brs=10699268&bre=10831619&ver=4&token=4b9dbc8a63977559fec11989b1c098d9
#EXT-X-ENDLIST
Очевидно, вы можете видеть, что файл M3U8 содержит более подробную информацию описания всего видео, описывающую путь и продолжительность ресурсов фрагмента видео, а также некоторое основное содержимое файла M3U8.
Как скачать файл потокового видео M3U8
Итак, после понимания этого основного содержимого, как нам его загрузить?
Здесь мы будем использовать инструмент под названием ffmpeg,
ffmpeg
ffmpeg — это набор компьютерных программ с открытым исходным кодом, которые можно использовать для записи, преобразования цифрового аудио и видео и преобразования их в потоки. Под лицензией LGPL или GPL. Он предоставляет комплексное решение для записи, преобразования и потоковой передачи аудио и видео. FFmpeg имеет очень мощные функции, в том числе: захват видео, преобразование видеоформата, скриншоты видео, нанесение водяных знаков на видео, нарезку видео (m3u8, ts), запись видео, потоковое видео, изменение параметров аудио и видео (метод кодирования, разрешение, битрейт), битрейт. и т.д.) функция и т.д...
Здесь мы используем функцию преобразования видеоформата для преобразования потокового видео m3u8 в mp4.
Подготовка окружающей среды
Подготовительная работа, конечно, для установки среды FFMPEG локального компьютера. Специфический метод установки заключается в следующем, потому что я Mac System, поэтому я могу установить его через домощь
brew install ffmpeg
Для Windows вы можете перейти прямо на официальный сайт, чтобы загрузить exe-файл и установить его напрямую (загрузка немного медленная, вам может потребоваться перевернуть стену)
Затем вам нужно проверить, успешно ли установлен ffmpeg.
ffmpeg
Если вы видите номер версии, установка прошла успешно.
Давай сделаем это! ! !
Найдите файл m3u8, соответствующий видео
Здесь я использую видео от Tencent Video.Адрес видео ссылки, почему зарубежные страны называются космонавтами, а мы называемся космонавтами
Откройте страницу, вызовите сеть, отфильтруйте все ресурсы, выберите Fetch/XHR, чтобы получить все ресурсы интерфейса, затем введите m3u8 в строке фильтра и отфильтруйте ресурсы m3u8 во всех ресурсах интерфейса.
В настоящее время вы обнаружите, что многие ресурсы m3u8 сбивают с толку.Согласно информации, с которой вы ознакомились, не так ли, потоковое видео в файле, как правило, является индексным файлом (m3u8) и несколькими видеоклипами ts?Почему существует так много m3u8 ?
Из любопытства кликнул по очереди все файлы m3u8.После долгих возни случайно обнаружил, что во многих интерфейсах есть параметр vurl, и значением этого параметра является нужный нам m3u8 документ.
И я видел несколько интерфейсов, запрошенный адрес - это тот же файл, поэтому я открыл ссылку на файл, который является нужным нам файлом манифеста m3u8.
Как скачать ts видеоклип файла манифеста (индексный файл)
С помощью файла манифеста соответствующий видеоклип ts легко найти, откройте только что загруженный файл m3u8.
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:19
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:7.400,
00_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=0&start=0&end=7400&brs=0&bre=174839&ver=4&token=7ffa05bc5f8fb4e06fb3c0ceffb01e25
#EXTINF:12.000,
01_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=1&start=7400&end=19400&brs=174840&bre=501583&ver=4&token=235ee39cec228476698845e8d28a3c3d
#EXTINF:12.000,
02_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=2&start=19400&end=31400&brs=501584&bre=808587&ver=4&token=8dee7b8a7f0180ddc9cea3fa24c7a30f
#EXTINF:12.000,
03_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=3&start=31400&end=43400&brs=808588&bre=1113523&ver=4&token=ed413f2ef2fe15d6e3404a9285dfd9f3
#EXTINF:12.000,
04_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=4&start=43400&end=55400&brs=1113524&bre=1625259&ver=4&token=ba46b354983d8bbc6947d6092f7ba0b1
#EXTINF:16.536,
05_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=5&start=55400&end=71936&brs=1625260&bre=2047131&ver=4&token=ee6613ebcc43f71c57cb0652966d88d3
#EXT-X-ENDLIST
Текущий список содержит все ссылки ts, но эти ссылки являются относительными путями. Если вы хотите загрузить их по отдельности, вам нужно вручную соединить их вместе.
Все адреса представляют собой текущий префикс файла m3u8 + адрес ts
eg:
https://apd-2b5d5d0f3be697448afa51aed34d60f0.v.smtcdns.com/omts.tc.qq.com/ADsLVNV91XJRZyI9e_MJKm9CpwpGTOLjOd3_6Hz0cFVQ/uwMROfz2r55kIaQXGdGnC2dXOm7DLbvBwpViVuB3d6NGBLWa/svp_50069/Xmh_RNZ4x5Uo-TkdRJ9jrq3A4Dp2Eb2tJkJDlS0bnCWlVdH_poK3P4Y02og_SzA-fRSJ1aHWhBgkohMwnpgE87iYTQhyGcn3q_7PP3zeOrZsf5B0kCTPc54OWTlbqBHMkxrrUS9ylKezAAXbeN6Us1TWLeikS8VaNjbCTaiIeIKy-f0PpznnVQ/05_gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.1.ts?index=5&start=55400&end=71936&brs=1625260&bre=2047131&ver=4&token=ee6613ebcc43f71c57cb0652966d88d3
Откройте браузер напрямую, вы можете загрузить текущий фрагмент ts
Таким же образом загрузите все клипы и сохраните имена файлов без изменений, поместите их в одну папку и поместите в ту же папку самый ранний загруженный файл манифеста m3u8.
Затем откройте файл m3u8 редактором, вам нужно внести некоторые изменения и корректировки в файл, вам нужно удалить все параметры после .ts, потому что это относительный путь, а локальный файл не имеет параметров, поэтому вы необходимо вручную удалить следующие параметры
После завершения удаления это выглядит следующим образом:
На данный момент подготовительная работа завершена
Слияние фрагментов, синтез mp4
Упомянутый выше шаг в HLS разбивается на множество видеосегментов, затем следующая операция является обратной операцией, чтобы объединить во множество сегментов файл mp4.
На этот раз мы использовали наш знаменитый ffmpeg.
Используйте терминал для входа в каталоги файлов ts и m3u8, которые мы только что подготовили.
Выполнение заказа
ffmpeg -i ./gzc_1000035_0b2etyaawaaag4agfmdjrvqzlhwdbopaac2a.f304110.ts.m3u8 "test.mp4"
Смысл команды в том, чтобы преобразовать список xxxx.ts.m3u8 в test.mp4. test.mp4 — сгенерированное имя файла
Сгенерировано успешно. Еще раз взглянем на содержимое папки.
Файл test.mp4 создан
Откройте его, чтобы увидеть, может ли он играть нормально
Готово! ! !
Наконец-то я могу ожесточиться, сделать очень высокомерное выражение лица и сказать ей, что это очень просто, совсем не сложно.
следовать за
Я не знаю, когда случайно открыл элемент отзыва, потом перешел в мобильный режим, обновил страницу
Обычно находим src тега видео
посмотри что я нашел
Здесь не блоб, а файл mp4, который можно открыть напрямую! ! !
Небольшой сюрприз, в будущем появится еще один способ загрузки видео.
Вопросы автоматизации
Вышеописанный процесс кажется сложным и хлопотным, в будущем мы рассмотрим управление многими механическими процессами с помощью кода, чтобы вы могли разобрать его видеофайл, заполнив ссылку на видео.
Вы даже можете запаковать ffmpeg в докер и опубликовать его на сервере, что более удобно.
Суммировать
- Переключите веб-страницу в режим h5, очень удобно найти ссылку mp4 тега видео
- Используйте режим приведенного выше ссылки, чтобы выполнить синтез видео через FFMPEG
Оба метода возможны, но второй метод более общий.Первый способ заключается в просмотре режима воспроизведения видео h5 на каждой платформе, не обязательно воспроизведение mp4.
обо мне
WeChat: cjs764901388
Общий номер: xstxoo
Мой публичный номер: Одноклассник Комацу
Вы можете подписаться на меня и вместе изучать фронтенд