Youtube blob urls don't work in browsers but in src

First,I know that there are no blob urls only objects.
I made my own blob object for a video buffer and then I used it in a src of video tag which is something like blob://website.com/blabla . So I opened this url in new tab of my chrome browser it worked perfectly Now when I tried to open the url of youtube video src into a new tab that did't work but mine blob worked like charm Why Is That?
Can i also make my own system like this so that blob not work in browsers but in src?
Is this any kind of htaccess code that I can use?

and I don't want it to work in new tab.

2 Answers

Answers 1

Actually, the URL that you're referring is just a "string" reference to the BLOB itself (which is created using the function window.URL.createObjectURL); So, that you can use it like a normal URL. And, the scope is also only until the document is unloaded.

So, I don't think it is possible for you to open the URL just using browser. And also I tried to re-create what you're saying but with no avail (in my own website, create a blob and put the URL into browser).

Below is the code

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(); 

The fiddle here

---

Update :

Ok, after I looked at it. seems like youtube is using media-source to stream the video.

I haven't updated the fiddle (cannot found a video that I can use). But, basically, It still using the same function (createObjectURL) to create the blob URL. But, instead of using the source (image, video, etc) to pass to the function. You should pass the MediaSource object into the function.

And then, you use the blob URL and pass it into the video.src. Therefore, when you try to open the blob link. You should not be able to see the video again.

Answers 2

The question seems somewhat vague to me, so here is what I interpret (also from the code in the images of your question):

• you receive a Blob (image's binary data) through a XMLHttpRequest() GET-request (responseType = 'blob')
• you create a Blob URL with URL.createObjectURL() in the URL Store for XMLHttpRequest() response-object (the Blob holding the binary data)
• you set the resulting Blob URL-string as src for a image (and append the image to the document, thereby showing the image you just downloaded)
• You "don't want it to work in new tab" ("it" being the Blob URL-string I assume).

In your comments you say:

• In fiddle I inspected the image and copied the src and then pasted it in new tab and it worked and showed the image I don't want the image to be shown directly with the blob url.

• If you go to youtube and open the src of video in new tab : It will not work,, I want this to happen

It appears to me that you do not want the user to be able to view/download the blob when they copy the Blob URL-string (by examining the live source or simply right-click-on-image>>Copy Imagelocation) and paste it into a new tab/window (for which you give youtube as an example).

TL;DR:
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);
  returns a Blob URL that is automatically revoked after it's first use.
  _{Note: quite some browsers were 'late' to implement this one.}

---

Here's what's happening:
The URL Store is only maintained during a session (so it will survive a page-refresh, since it is still the same session) and lost when the document is unloaded.
So, if your fiddle is still open, then fiddle-document (the document that created the Blob URL) is obviously not yet unloaded, and therefore it's Blob URLs are available to the browser (any tab/window) as long as it is not revoked!
This is a relevant feature: you can build/download/modify a Blob in the browser, create a Blob URL and set it as href to a file-download link (which the user can right-click and open in a new tab/window!!)
Close the fiddle or revoke the Blob URL from the URL Store and the Blob URL is no longer accessible (also not in a different tab/window).

Try yourself with your modified fiddle: https://jsfiddle.net/7cyoozwv/
In this fiddle it should now no longer be possible to load your sample image into a different tab/window after you copied the image url (once the image is displayed in your page).
Here I revoked the URL manually (revokeObjectURL()) as it is currently the best cross-browser method (partially due to the api not yet fully being stabilized).
Also note: an element's onload event can be an elegant place to revoke your Blob URL.

Hope this is what you were after!

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati