URL-адреса Youtube Blob работают не в браузерах, а в src

Я знаю, что нет URL-адресов больших двоичных объектов, а есть только объекты.
Я создал свой собственный объект большого двоичного объекта для видеобуфера, а затем использовал его в теге src для видео, который выглядит примерно так: blob://website.com/ блаблоббла . Я открыл этот URL в браузере, он работал

когда я открыл URL-адрес видео youtube src (url-адрес BLOB-объекта) на новой вкладке, это не сработало, но мой src-видео (URL-адрес BLOB-объекта) сработал

Я хочу знать, как я могу сделать то же самое с моими URL-адресами больших двоичных объектов, чтобы они работали только в src тега html video и выдавали ошибку или не работали во внешней вкладке/окне браузеров. Я просто хочу знать технология, лежащая в основе этого, а также объекты BLOB-объектов и их свойства URL.


url javascript blob media-source fileapi
person Waqas Tahir    schedule 28.06.2015    source источник
comment
Ответ, необходимый для этого вопроса, с той же проблемой, с которой я сталкиваюсь. пробовал много искать но пока пустые руки. :(   -  person Vartika    schedule 01.08.2015

Ответы (2)


arrow_upward
10
arrow_downward

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

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

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

  • #P3#
  • #P4#

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

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

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

  • Blob URL referencing (objects that represent) 'raw local data' (like (Local-)File, Blob, etc.)
    For these you want to automatically (or programmatically) revoke the Blob URL from the browser's URL Store (which you could consider a simplified local webserver inside the browser, only available to that browser).
    • var myBlobURL=window.URL.createObjectURL(object, flag_oneTimeOnly);
      returns a re-usable Blob URL which can be revoked with: window.URL.revokeObjectURL(myBlobURL) (adds the Blob URL string to the Revocation List).
      Note: there used to be a second argument flag_oneTimeOnly which used to revoke the Blob URL automatically after it's first use, but that is currently no longer part of the spec! Also this flag often didn't work anyway (at least in firefox).
    • var myBlobURL=window.URL.createFor(object);
      возвращает Blob URL, который автоматически аннулируется после при первом использовании.
      Примечание: некоторые браузеры «запоздали» с реализацией этого.
  • MediaSource object URL referencing a special MediaSource Object
    These URL's are

Вот что происходит со скрипкой на изображении вашего вопроса и аналогичным кодом, который загружает видео как Blob (где вы загружаете данные/двоичный файл всего видеофайла на сервер с помощью xhr) или любой другие «локальные» данные:
вы по существу используете «голый» «нерасширенный» File-API.
URL Store сохраняется только во время сеанса (поэтому он выдержит обновление страницы, поскольку это все тот же сеанс) и теряется при выгрузке документа.
Таким образом, если ваша скрипка все еще открыта, то fiddle-document (документ, который создал Blob URL), очевидно, не еще не выгружен, и поэтому его Blob URLs доступны для браузера (любая вкладка/окно) как до тех пор, пока он не будет отозван!
Это важная функция: вы можете создать/загрузить/изменить 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):
The Расширения источников мультимедиа (MSE) также расширяют window.URL.createObjectURL() File-API, чтобы принимать MediaSource Object. В (текущий вариант) расширения объекта URL указано, что:

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

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

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

Возможно, "Краткое руководство по MSE"(источник: MSDN) может помочь прояснить разницу и основное использование:

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

  1. Определите элемент HTML5 video в разделе HTML страницы.
  2. Создайте объект MediaSource в JavaScript.
  3. Создайте виртуальный URL-адрес, используя createObjectURL с объектом MediaSource в качестве источника.
  4. Назначьте виртуальный URL свойству src видеоэлемента.
  5. Создайте SourceBuffer, используя addSourceBuffer, с типом пантомимы видео, которое вы добавляете.
  6. Получите сегмент инициализации видео из медиафайла онлайн и добавьте его в SourceBuffer с помощью appendBuffer.
  7. Получите сегменты видеоданных из медиафайла, добавьте их к SourceBuffer с помощью appendBuffer.
  8. Вызовите метод play для элемента видео.
  9. Повторяйте шаг 7, пока не закончите.
  10. Очистить.

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

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

person GitaarLAB    schedule 07.04.2016
comment
Я получил все сейчас. Спасибо также. - person Waqas Tahir; 10.04.2016
comment
OMG, ваш ответ был очень длинным для чтения. Просто сделайте его простым для понимания. - person Waqas Tahir; 10.04.2016
comment
Спасибо (за принятие и щедрость), и добро пожаловать! Для чего бы это ни стоило, я думаю, что ответ на вознаграждение должен содержать все соответствующие ссылки и источники; без объяснений ответ будет буквально просто: отзыв и документ !== HTMLMediaElement. Я также счел важным указать на то, что нелогичная функция createObjectURL() делает совершенно разные вещи в зависимости от того, как вы ее используете (мне всегда приходится совмещать короткое и полное). Я только что перепроверил свою скрипку, она работала нормально. Я так понимаю, у вас в итоге все заработало? - person GitaarLAB; 10.04.2016

arrow_upward
5
arrow_downward

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

Итак, я не думаю, что вы можете открыть URL-адрес только с помощью браузера. А также я пытался воссоздать то, что вы говорите, но безрезультатно (на моем собственном веб-сайте создайте большой двоичный объект и поместите 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-адреса большого двоичного объекта. Но вместо того, чтобы использовать источник (изображение, видео и т. д.), чтобы перейти к функции. Вы должны передать объект MediaSource в функцию.

Затем вы используете URL-адрес большого двоичного объекта и передаете его в файл video.src. Поэтому при попытке открыть ссылку blob. Вы не должны быть в состоянии увидеть видео снова.

person kucing_terbang    schedule 07.04.2016
comment
именно это и произошло в приведенном выше коде. попробуйте открыть значение в imageUrl на другой вкладке, и вы увидите;) (хотя, очевидно, не используя для этого htaccess) - person kucing_terbang; 07.04.2016
comment
В скрипке я проверил изображение и скопировал src, а затем вставил его в новую вкладку, и он сработал и показал изображение. Я не хочу, чтобы изображение отображалось напрямую с URL-адресом блоба. - person Waqas Tahir; 07.04.2016
comment
Хорошо, вы можете передать мне URL, который вы используете? потому что, когда я пытаюсь это сделать, это всегда будет страница 404. - person kucing_terbang; 07.04.2016
comment
Если я передам вам URL-адрес, он не будет работать в вашем браузере, потому что URL-адрес создается браузером с использованием случайных чисел. - person Waqas Tahir; 07.04.2016
comment
Во-первых, больше похоже на UUID, чем на случайные числа. Во-вторых, я начинаю догадываться, как именно вы пытались открыть образ? Похоже, вы путаетесь между URL-адресом, на который ссылается BLOB, с реальным URL-адресом, который действительно указывает на файл. Таким образом, вам может потребоваться шаг за шагом описать, как именно вы это делаете (если возможно, со скриншотом, чтобы прояснить ситуацию) по вопросу. - person kucing_terbang; 07.04.2016