Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2018, 03:45
Аспирант
Отправить личное сообщение для Samsam Посмотреть профиль Найти все сообщения от Samsam
 
Регистрация: 24.04.2014
Сообщений: 99

Создать blob ссылку
Я делаю это, и это работает. Но очень долго жду ответа от xhr.onload. Как быстро изменить ссылку видео mp4 на blob.

window.URL = window.URL || window.webkitURL; 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '1.mp4', true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) { 
    video.src = window.URL.createObjectURL(this.response);
    };

    xhr.send();
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2018, 04:43
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,806

Если video это HTMLVideoElement, то просто video.src = '1.mp4', в blob и xhr здесь нет необходимости.
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2018, 05:19
Аспирант
Отправить личное сообщение для Samsam Посмотреть профиль Найти все сообщения от Samsam
 
Регистрация: 24.04.2014
Сообщений: 99

Мне нужно изменить прямые ссылки mp4 на blob. как я могу это сделать ?
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2018, 06:16
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,806

"blob:..." это временная рандомная внутренняя ссылка браузера, чтобы ее создать из файла, его нужно сначала загрузить по прямой ссылке.
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2018, 23:00
Аспирант
Отправить личное сообщение для Samsam Посмотреть профиль Найти все сообщения от Samsam
 
Регистрация: 24.04.2014
Сообщений: 99

Можно привести пример ? я хочу исопльзовать blob ссылки как это делают многие сайты (youtube,vk,ok и т.д)
Ответить с цитированием
  #6 (permalink)  
Старый Вчера, 04:34
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,806

Media Source Extensions API (MSE). Пример (описание): создается blob-ссылка, файл подгружается частями в зависимости от времени проигрывания и добавляется в ее медиабуфер. Изменил пример, убрал зависимость от времени проигрывания:
var video = document.querySelector('video');
var assetURL = 'frag_bunny.mp4';
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
var totalLength = 0;
var loadedLength = 0;
var segmentLength = 1024 * 1024;
var mediaSource = null;
var sourceBuffer = null;

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
    mediaSource = new MediaSource;
    mediaSource.addEventListener('sourceopen', onSourceOpen);
    video.src = URL.createObjectURL(mediaSource);
} else {
    console.error('Unsupported MIME type or codec: ', mimeCodec);
}

function onSourceOpen() {
    sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    sourceBuffer.addEventListener('updateend', onUpdateEnd);
    loadFileLength(assetURL, onLoadFileLength);
};
function onUpdateEnd() {
    if (loadedLength < totalLength) {
        loadFileRange(assetURL, loadedLength, Math.min(loadedLength + segmentLength, totalLength), onLoadFileRange);
    } else {
        mediaSource.endOfStream();
    }
}

function loadFileLength(url, cb) {
    var xhr = new XMLHttpRequest;
    xhr.open('HEAD', url);
    xhr.onload = function () {
        cb(+xhr.getResponseHeader('Content-Length'));
    };
    xhr.send();
};
function onLoadFileLength(fileLength) {
    totalLength = fileLength;
    onUpdateEnd();
    video.addEventListener('canplay', function () {
        //video.play();
    });
}

function loadFileRange(url, start, end, cb) {
    var xhr = new XMLHttpRequest;
    xhr.open('GET', url);
    xhr.responseType = 'arraybuffer';
    xhr.requestHeaderRange = 'bytes=' + start + '-' + end;
    xhr.setRequestHeader('Range', xhr.requestHeaderRange);
    xhr.onload = function () {
        //logHeaders(xhr);
        loadedLength += end - start + 1;
        cb(xhr.response);
    };
    xhr.send();
};
function onLoadFileRange(chunk) {
    sourceBuffer.appendBuffer(chunk);
}

function logHeaders(xhr) {
    console.log('Range:', xhr.requestHeaderRange, 
        'Content-Length:', xhr.getResponseHeader('Content-Length'),
        'Content-Range:', xhr.getResponseHeader('Content-Range'));
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать Blob url Samsam Общие вопросы Javascript 1 28.05.2018 10:31
Создать ссылку на открытие локального файла с фокусом в определенном месте MARY_FS Events/DOM/Window 13 29.06.2016 15:54
Как создать ссылку в нужном месте через UserCSS или UserJS DenisLp Opera, Safari и др. 0 02.02.2015 06:03
создать ссылку ипользуя первое значение td ufaclub jQuery 10 22.07.2014 01:42
Создать всплывающее Popup окно при клике на ссылку dimkaja Элементы интерфейса 1 19.06.2014 11:15