web-dev-qa-db-ja.com

Youtube BlobのURLはブラウザでは機能しませんが、srcでは機能します

オブジェクトだけのblobURLはないことを私は知っています。
ビデオバッファ用に独自のblobオブジェクトを作成し、それをblob：//website.com/blablobblaのようなビデオタグのsrcで使用しました。私はそれが機能したブラウザでこのURLを開きました

youTubeビデオsrc（blob url）のURLを新しいタブで開いたとき、それは機能しませんでしたが、私のビデオsrc（blob url）は機能しました

Htmlビデオタグのsrcでのみ機能してエラーが発生するか、ブラウザの外部タブ/ウィンドウで機能しないように、blobURLで同じことを行う方法を知りたいです。知りたいだけです。このオブジェクトとblobオブジェクトの背後にあるテクノロジーとそれらのurlプロパティ。

javascripturlblobfileapimedia-source
14
Waqas Tahir

質問は私にはやや曖昧に見えるので、これが私が解釈するものです（あなたの質問のフィドル画像のコードからも）：

  • XMLHttpRequest()Blob-リクエスト（responseType = 'blob'）を介してGET（画像のバイナリデータ）を受け取ります
  • URL.createObjectURL()response-オブジェクト（バイナリデータを保持するBlob）のBlob URLにXMLHttpRequest()を含むURL Storeを作成します。
  • 結果のBlob URL- stringを画像のsrcとして設定します（そして、画像をドキュメントに追加して、ダウンロードしたばかりの画像を表示します）
  • 「新しいタブで機能させたくない」（「それ」は私が想定するBlob URL-文字列です）。

あなたのコメントであなたは言う：

  • フィドルでは画像を調べてsrcをコピーし、新しいタブに貼り付けました動作し、画像を表示しました画像をblobのURLで直接表示したくない。

  • あなたがユーチューブに行き、新しいタブでビデオのソースを開くと：それは機能しません、、 これを起こさせたい

notユーザーがBlob URL-文字列をコピーして（ライブソースまたは単にright-click-on-image>>Copy Imagelocationを調べて）新しいblobに貼り付けるときに、blobを表示/ダウンロードできるようにしたいようです。タブ/ウィンドウ（例としてyoutubeを挙げます）。

しかし、あなたはまたビデオについて話している。

TL; DR：あなたの質問/報奨金はwindow.URL.createObjectURL();によって返される2つの異なるタイプのURLを混同しているようです：

  • Blob URL 参照（表すオブジェクト） '生のローカルデータ'（（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に追加します）。
      注：2番目の引数flag_oneTimeOnlyがあり、最初の使用後にBlob URLを自動的に取り消すために使用されていましたが、現在は仕様の一部ではありません。また、このフラグはとにかく機能しないことがよくありました（少なくともFirefoxでは）。
    • var myBlobURL=window.URL.createFor(object);
      は、最初の使用後に自動的に取り消されるBlob URLを返します。
      注：かなりの数のブラウザーは、これを実装するのに「遅れ」ていました。
  • MediaSource object URL 参照特別MediaSourceオブジェクト
    これらのURLは
    • src （<audo>＆<video>要素を考えてください）のHTMLMediaElementを特別なMediaSource Objectにリンクすることのみを目的としています
      注：新しいタブ/ウィンドウはHTMLMediaElementではありません
    • すでに自動的に取り消されました
      注：それらはwindow.URL.createObjectURL();を介して作成されますが

質問の画像のフィドルで何が起こっているかそしてビデオをBlobとしてダウンロードした同様のコード（xhrを使用してサーバーにビデオファイルのデータ/バイナリ全体をダウンロードした場合） =またはその他の「ローカル」データ：
基本的に 'bare''un-enhanced' File-API を使用しています。
URL Storeはセッション中にのみ維持され（したがって、同じセッションであるため、ページの更新後も存続します）、ドキュメントがアンロードされると失われます。
したがって、フィドルがまだ開いている場合、フィドルドキュメント（Blob URLを作成したドキュメント）は明らかにnotまだアンロードされていないため、ブラウザでBlob URLsを使用できます（任意タブ/ウィンドウ）取り消されない限り！
これは関連性があります機能：ブラウザでBlobをビルド/ダウンロード/変更し、Blob URLを作成して、ファイルダウンロードリンクへのhrefとして設定できます（ユーザーはこれを実行できます）右クリックして新しいタブ/ウィンドウで開きます!!）
フィドルを閉じるか、Blob URLからURL Storeを取り消すと、Blob URLにアクセスできなくなります（別のタブ/ウィンドウにもありません）。

変更したフィドルを試してみてください：https://jsfiddle.net/7cyoozwv/
このフィドルでは、画像のURLをコピーした後（画像がページに表示された後）、サンプル画像を別のタブ/ウィンドウに読み込むことができなくなりました。
ここでは、URLを手動で取り消しました（revokeObjectURL()）。これは、現在最良のクロスブラウザー方式であるためです（一部、APIがまだ完全に安定していないため）。
また注意：要素のonloadイベントは、Blob URLを取り消すためのエレガントな場所になります。

これは、window.URL.createObjectURL(MediaSource)：によって返される<audio>を使用して<video>にリンクされたMediaSource ObjectまたはMediaSource object URLソースに何が起こっているかです。
Media Source Extensions（MSE）また拡張File-APIのwindow.URL.createObjectURL()はMediaSource Objectを受け入れます。 （の現在のドラフト） RL Object Extension は、次のことを指定します。

このアルゴリズムは、autoRevokeをtrueに設定したcreateObjectURL（）[FILE-API]メソッドの動作を反映することを目的としています。

File APIのwindow.URL.createObjectURL()もはやの現在の仕様には、代わりにwindow.URL.createFor()を使用する必要があるプログラマーがアクセスできるautoRevoke（またはflag_oneTimeOnly）ブールフラグがあることに注意してください。 Media-Source仕様がいつそれを模倣するのだろうか（そして下位互換性のためにそれらのcreateObjectURL()を新しいcreateFor()拡張にエイリアスする（それが現在の動作を意図しているように見えるのでより適切であるように思われる））。

これらの結果の自動的に取り消されたURL文字列は意図されただけsrcのHTMLMediaElement（<audo>＆<video>要素を考えてください）を特別なMediaSource Objectにリンクします。
空のDocument（新しいタブ/ウィンドウから）が<audo>または<video>要素であるとは思いません。

おそらく「MSEのクイックチュートリアル」（ソース： [〜＃〜] msdn [〜＃〜] ） 違いと基本的な使用法を明確にするのに役立つかもしれません：

MSE APIを使用するには、次の手順に従います。

  1. ページのHTMLセクションでHTML5video要素を定義します。
  2. JavaScriptでMediaSourceオブジェクトを作成します。
  3. createObjectURLオブジェクトをソースとしてMediaSourceを使用して仮想URLを作成します。
  4. ビデオ要素のsrcプロパティに仮想URLを割り当てます。
  5. 追加する動画のmimeタイプを使用して、SourceBufferを使用してaddSourceBufferを作成します。
  6. オンラインのメディアファイルからビデオ初期化セグメントを取得し、SourceBufferを使用してappendBufferに追加します。
  7. メディアファイルからビデオデータのセグメントを取得し、それらをSourceBufferとともにappendBufferに追加します。
  8. ビデオ要素でplayメソッドを呼び出します。
  9. 完了するまで手順7を繰り返します。
  10. 掃除。

あなた（またはクライアントのプラットフォームで再生するためにサポートされているテクノロジーを動的に選択するYouTubeのような大物プレーヤー（したがって、あなたが話しているYouTubeビデオのURLの種類を確実に知る方法はありません））could新しい特別なMediaSource Objectを使用してビデオ（またはオーディオ）を再生しています。
これにより、ストリーミングサポートのためにHTML5ビデオにバッファーベースのソースオプションが追加されます（再生する前に完全なビデオファイルをダウンロードするか、SilverlightやAdobe Flashなどのアドオンを使用してメディアをストリーミングする場合と比較して）。

これがあなたが求めていたものであることを願っています！

8
GitaarLAB

実際、参照しているURLは、BLOB自体（関数"string"を使用して作成されます）への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）を使用してblobURLを作成します。ただし、ソース（画像、ビデオなど）を使用して関数に渡す代わりに。 MediaSourceオブジェクトを関数に渡す必要があります。

次に、blob URLを使用して、それをvideo.srcに渡します。したがって、blobリンクを開こうとすると。あなたは再びビデオを見ることができないはずです。

5
kucing_terbang