Youtube blob URL не работают в браузерах, но в src

Во-первых, я знаю, что нет объектов blob-urls только.
Я создал свой собственный объект blob для видео-буфера, а затем использовал его в src видео-тега, который похож на blob://website.com/blabla. Таким образом, я открыл этот url на новой вкладке моего браузера Chrome, он отлично работал. Теперь , когда я попытался открыть URL-адрес youtube video src на новой вкладке, которая не работала, но мой blob работал как шарм. Почему это?
Могу ли я также создать свою собственную систему так, чтобы blob не работал в браузерах, а в src?
Это какой-либо код htaccess, который я могу использовать?

и я не хочу, чтобы он работал на новой вкладке.

Ответ 1

Вопрос кажется несколько расплывчатым для меня, поэтому вот что я интерпретирую (также из кода в скриптовых изображениях в вашем вопросе):

вы получаете Blob (двоичные данные изображения) через XMLHttpRequest() GET -request (responseType = 'blob')
вы создаете Blob URL с URL.createObjectURL() в URL Store для XMLHttpRequest() response -объект (Blob, содержащий двоичные данные)
вы устанавливаете результирующий Blob URL -струмент как src для изображения (и добавьте изображение в документ, тем самым показывая только что загруженное изображение).
"Вы не хотите, чтобы он работал на новой вкладке" ( "это" - это Blob URL -строка, которую я предполагаю).

В ваших комментариях вы говорите:

В скрипке я проверил изображение и скопировал src, а затем вложил его в новую вкладку, и он работал, и показал изображение, которое я не хочу, чтобы изображение отображалось напрямую с url blob.
Если вы заходите на YouTube и открываете src видео на новой вкладке: он не будет работать, я хочу, чтобы это произошло

Мне кажется, что вы не хотите, чтобы пользователь мог просматривать/загружать blob при копировании Blob URL -string (путем изучения исходного источника или просто right-click-on-image>>Copy Imagelocation) и вставлять его в новый tab/window (для которого вы даете youtube в качестве примера).

Но вы также говорите о видео.

TL; DR: Кажется, ваш вопрос/баунти может смешивать два разных типа URL, возвращаемых window.URL.createObjectURL();:

Blob URL ссылка (объекты, которые представляют) 'raw local data' (например, (Local-) File, Blob и т.д.) < ш > Для этого вы хотите автоматически (или программно) отменить Blob URL из браузера URL Store (который можно рассматривать как упрощенный локальный веб-сервер внутри браузера, доступный только для этого браузера).
- var myBlobURL=window.URL.createObjectURL(object, flag_oneTimeOnly);
  возвращает повторно используемый Blob URL, который может быть отменен с помощью: window.URL.revokeObjectURL(myBlobURL) (добавляет строку Blob URL к Revocation List).
  _{Примечание. Раньше использовался второй аргумент flag_oneTimeOnly, который автоматически удалял Blob URL после его первого использования, но в настоящее время он больше не является частью спецификации! Также этот флаг часто не работал (по крайней мере, в firefox).}
- var myBlobURL=window.URL.createFor(object);
  возвращает Blob URL, который автоматически отменяется после первого использования.
  _{Примечание: некоторые браузеры "опоздали" для реализации этого.}
MediaSource object URL, ссылаясь на специальный Объект MediaSource < ш > Эти URL-адреса
- предназначен только для ссылки src HTMLMediaElement (думаю <audo> и <video>) на специальный MediaSource Object
  _{Примечание: новая вкладка/окно не является HTMLMediaElement}
- уже автоматически отменено
  _{Примечание: даже если они создаются с помощью window.URL.createObjectURL();}

Здесь, что происходит для скрипки вашего изображения вопроса и аналогичного кода, загружавшего видео как Blob (где вы загрузили все данные видеофайла/двоичные файлы на сервере с помощью xhr) или любой другой " локальные данные:
Вы, по сути, используете "голый" "неусовершенствованный" File-API.
URL Store поддерживается только во время сеанса (так что он выживет при обновлении страницы, поскольку он все тот же сеанс) и потерян, когда документ выгружен.
Итак, если ваша скрипка по-прежнему открыта, то скриптовый документ (документ, создавший Blob URL), очевидно, еще не выгружен, и поэтому он Blob URL доступен для браузера (любая вкладка/окно), если он не отменяется!
Это важная функция: вы можете создать/загрузить/изменить Blob в браузере, создать Blob URL и установить его как href в ссылку загрузки файла (которую пользователь может щелкнуть правой кнопкой мыши и открыть в новая вкладка/окно!)
Закройте скрипту или отмените Blob URL с URL Store, а Blob URL больше не будет доступен (также не в другой вкладке/окне).

Попробуйте свою измененную скрипту: https://jsfiddle.net/7cyoozwv/
В этой скрипте теперь вам больше не нужно будет загружать образ вашего образца в другую вкладку/окно после копирования URL-адреса изображения (как только изображение будет отображаться на вашей странице).
Здесь я вручную удалил URL-адрес (revokeObjectURL()), поскольку в настоящее время это лучший кросс-браузерный метод (частично из-за того, что api еще не полностью стабилизируется). Также обратите внимание: элемент onload может быть элегантным местом для отмены вашего Blob URL.

Вот что происходит с источником <audio> или <video>, связанным с MediaSource Object с помощью MediaSource object URL, возвращаемого window.URL.createObjectURL(MediaSource):
Расширения источника мультимедиа (MSE) также расширяют File-API window.URL.createObjectURL(), чтобы принять MediaSource Object. В текущем черновике Расширение URL-адреса указано, что:

Этот алгоритм предназначен для отражения поведения метода createObjectURL() [FILE-API], при котором autoRevoke имеет значение true.

^{Обратите внимание, что текущая спецификация File API window.URL.createObjectURL() больше не имеет логического флага autoRevoke (или flag_oneTimeOnly), доступного программисту, который вместо этого должен использовать window.URL.createFor() для этой цели. Интересно, когда спецификация Media-Source будет имитировать это (и для обратной совместимости псевдоним их createObjectURL() с новым расширением createFor() (кажется более уместным, так как это похоже на то, как он, похоже, предназначен для работы в настоящее время)).}

Эти результирующие автоматически отменяемые строки URL предназначены только для привязки src элементов HTMLMediaElement (думаю <audo> и <video>) к специальному MediaSource Object. < ш > _{Я не думаю, что пустой Document (из новой вкладки/окна) является элементом <audo> или <video>.}

Возможно, "Быстрый учебник по MSE" ^{(источник: MSDN)} может помочь прояснить разницу и базовое использование:

Чтобы использовать API MSE, выполните следующие действия:

Определите элемент HTML5 video в разделе HTML страницы.

Создайте объект MediaSource в JavaScript.

Создайте виртуальный URL-адрес с помощью createObjectURL с объектом MediaSource в качестве источника.

Назначьте виртуальный URL для свойства видеоэлемента src.

Создайте SourceBuffer с помощью addSourceBuffer с типом mime добавляемого видео.

Получите сегмент инициализации видео из медиафайла онлайн и добавьте его в SourceBuffer с помощью appendBuffer.

Получите сегменты видеоданных из медиафайла, добавьте их в SourceBuffer с помощью appendBuffer.

Вызовите метод play для элемента видео.

Повторите шаг 7 до завершения.

Очистка.

Вы (или крупный игрок, такой как youtube, который будет динамически выбирать поддерживаемые технологии для воспроизведения на клиентской платформе (так что нет никакого способа точно сказать, какой именно URL-адрес вашего YouTube-видео вы используете)) может использоваться новый специальный MediaSource Object для воспроизведения видео (или аудио).
Это добавляет исходные параметры на основе буфера для видео в формате HTML5 для потоковой поддержки (по сравнению с загрузкой полного видеофайла перед воспроизведением или использованием надстройки, например Silverlight или Adobe Flash, для потоковой передачи).

Надеюсь, это то, чем вы были!

Ответ 2

Фактически, URL-адрес, на который вы ссылаетесь, является ссылкой "string" на сам BLOB (который создается с помощью функции window.URL.createObjectURL); Итак, вы можете использовать его, как обычный URL. Кроме того, область действия также сохраняется до тех пор, пока документ не будет выгружен.

Итак, я не думаю, что вы можете открыть URL-адрес только с помощью браузера. А также я пытался воссоздать то, что вы говорите, но безрезультатно (на моем собственном веб-сайте, создайте blob и поместите URL-адрес в браузер).

Ниже приведен код

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://kurrik.github.io/hackathons/static/img/sample-128.png");
xhr.responseType = "blob";
xhr.onload = function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   console.log(imageUrl);
   var imgDOM = document.createElement("img");

   imgDOM.src = imageUrl;
   document.getElementById("divImage").appendChild(imgDOM);
};
xhr.send();

Скрипт здесь

Обновление:

Хорошо, после того, как я посмотрел на него. похоже, что youtube использует media-source для потоковой передачи видео.

Я не обновил скрипку (не могу найти видео, которое я могу использовать). Но, в основном, он все еще использует ту же функцию (createObjectURL), чтобы создать URL-адрес blob. Но вместо использования источника (изображения, видео и т.д.), Чтобы перейти к функции. Вы должны передать объект MediaSource в функцию.

Затем вы используете URL-адрес blob и передаете его в video.src. Поэтому, когда вы пытаетесь открыть ссылку blob. Вы не сможете снова увидеть видео.