Проблема в ссылке на видео

65
08 февраля 2022, 10:00

Озадачен вопросом и не мог понять и найти ответ. Вот как выглядит моя ссылка и все работает хорошо

src="blob:http://mysite/a1dbb539-483d-4b08-a94b-1e9f97706a79"

Генерирую ссылку таким образом:

 var id = "xk562mNr57pW";
    $.ajax({
        url: "@Url.Action("WatchVideo", "Video")",
        type: 'POST',
        data: {id},
        cache: false,
        async: true,
        success: function (data) {
            debugger; 
           var blob = b64toBlob(data, "video/mp4");
            var link = window.URL.createObjectURL(blob);
            var video = document.getElementById('player');
            debugger;
           video.src = link;
        }
    });
    function b64toBlob(b64Data, contentType, sliceSize) {
        var byteCharacters = atob(b64Data);
        var byteArrays = [];
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);
            var byteNumbers = new Array(slice.length);
            var byteArray;
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }
        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }

Когда я перехожу по прямой ссылке в браузере - blob:http://mysite/a1dbb539-483d-4b08-a94b-1e9f97706a79 , то у меня играет видео в стандартом плеере и можно его скачать.

Увидел, что на других сайтах и ютубе в том числе, когда переходишь по прямой ссылке, то вот такое.

Как мне сделать так же, чтобы было как на ютубе?

Answer 1

Нашел такой вариант, что нужно использовать технологию hls(HTTP Live Streaming). Если кто-то будет искать, как все сделать, просто опишу, как можно кратко.

  1. Использовал готовый плеер, взял на - playerjs уже с интегрированным hls.js

  2. Нужно сделать себе плейлист расширением .m3u8, для этого использовал программу - ffmpeg. . Как запустить ее и пример кода ffmpeg -i 123.mp4 -s 426x240 -hls_list_size 0 240p.m3u8

И полный плейлист будет выглядит так:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=10000,RESOLUTION=426x240
240p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=420000,RESOLUTION=640x360
360p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=680000,RESOLUTION=842x480
480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1256000,RESOLUTION=1280x720
720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=1920x1080
1080p.m3u8

и код на фронте:

 var url = window.location.origin + "/CollectionVideoFile/index.m3u8";
    var player = new Playerjs({
        id: "player", file: url});

Если знаете, что лучше или проще, дайте знать, чтобы узнать что-то новое.

READ ALSO
ES6 и его поведение. JavaScript [дубликат]

ES6 и его поведение. JavaScript [дубликат]

Всем приветХотел бы узнать мнение опытных кодеров, почему такое поведение у метода filter

135
Что значит оператор `!!`? [дубликат]

Что значит оператор `!!`? [дубликат]

Двойное не - что это значит?

68
Вывод в форму результата работы функции в js

Вывод в форму результата работы функции в js

Прошу прощения за тупость, но может найдётся кто нибудь, кто подскажет чайнику как вывести результаты (obj) в форму? Мне не важен конкретный...

90
Помогите разобраться с функцией

Помогите разобраться с функцией

Задача заключается в том, чтобы создать функцию, которая возвращает сумму последовательности целых чиселПоследовательность определяется...

70