Вы не можете просто вести себя так же, как в браузерах.
Вы должны понимать, что браузеры достаточно умны при отображении носителей, и что у них есть доступ к информации, которой у нас просто js-активаторы.
Во-первых, когда они отображают носитель, они будут искатьдля метаданных.Обычно они находятся либо в начале файла, либо в его конце (и, возможно, иногда где-то еще, но это редко встречается в сети).
Таким образом, они начинают с выполнения запроса диапазона в начале в надежде на возможность анализа метаданных файла, если не найден, они будут искать в конце.
Получив эти метаданные, они знают, в каком положении находится каждый блок данных.относительно метки времени СМИ.Таким образом, они могут запрашивать с сервера только те байты, которые необходимы для отображения времени, запрошенного пользователем.
Именно так вы можете искать дальше, чем то, что уже было извлечено;По завершении поиска браузер отменяет свой предыдущий запрос и создает новый для байтового диапазона, содержащего данные в запрошенное время (если еще не получено).
Браузер отвечает за выборку.и часть декодирования, так что оба могут общаться вместе, и эта настройка возможна.Однако у нас нет доступа к декодирующей части, все, что мы можем сделать, это извлечь данные и передать их в декодер браузера.
Это означает, что для того, чтобы делать то, что вы хотите, нам нужно знать, как генерируются наши файлы, чтобы иметь возможность сделать правильные диапазон-запросы на основена операции поиска пользователя.
Это выполнимо, это именно то, что делает большинство видеосервисов, таких как YouTube, для обеспечения переменного качества медиаданных.Вы можете использовать MediaSource для передачи ваших данных в декодер браузера, как если бы это был поток, поступающий с сервера.
Тот факт, что данные обслуживаются как поток, также подразумевает, что у вас будетсоздать свой собственный пользовательский интерфейс, чтобы позволить им искать, где они хотят.Я надеюсь, что вы поймете, что я не буду делать этого в этом ответе, а останусь на очень высоком уровне.
И хотя это, вероятно, не будет соответствовать вашим потребностям, я долженвключите ленивый способ, который состоит в загрузке полного носителя и встраивании его в память компьютера пользователя.Это имеет большой недостаток, заключающийся в невозможности выполнить какой-либо запрос диапазона, и поэтому ваши пользователи должны загрузить весь файл , прежде чем смогут начать его воспроизведение, что не очень хорошая идея, если ваши пользователив медленных сетях, но его преимущество заключается в простоте реализации:
// some URLs
const path = "https://dl.dropboxusercontent.com/s/",
file1 = "f945qd8gju2x5y6/part_1.mp4",
file2 = "qs3us6qve32jjju/part_2.mp4"
console.log('begin to fetch, please be patient');
// fetch all the different parts
Promise.all([
fetch(path + file1).then(r=>r.blob()),
fetch(path + file2).then(r=>r.blob())
])
// merge in a single Blob
.then(arr => new Blob(arr))
// display from memory
.then(blob => vid.src = URL.createObjectURL(blob))
.then(_ => console.log('ready to play'));
<video id="vid" controls></video>