Skip to content

Instantly share code, notes, and snippets.

@edin-m
Last active May 17, 2024 07:45
Show Gist options
  • Save edin-m/889fa79a0fa124b1a8c3 to your computer and use it in GitHub Desktop.
Save edin-m/889fa79a0fa124b1a8c3 to your computer and use it in GitHub Desktop.
HTML video play file blob object url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video></video>
<br/>
<input type="file" name="file" id="fileItem" onchange="onChange()" >
<input type="submit" value="Play">
</form>
<script type="text/javascript">
var URL = window.URL || window.webkitURL;
var video = document.getElementsByTagName('video')[0];
function onChange() {
var fileItem = document.getElementById('fileItem');
var files = fileItem.files;
var file = files[0];
var url = URL.createObjectURL(file);
video.src = url;
video.load();
video.onloadeddata = function() {
video.play();
}
}
</script>
</body>
</html>
@xubmuajkub
Copy link

What if I want to play from the direct URL, e.g. https://example.com/video/video.mp4?

@arachi007
Copy link

yes, how about play video from url ? not from file like that ?

@MarioEisold
Copy link

MarioEisold commented Jun 14, 2018

I have tried many different examples but all seem to fail at some point.
i.e.: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource (scroll to the example)
Fails because the video has to be encoded in specific way.

I also tried to modify the above (does not load or play the video but creates a URL and adds it as source):

<script` type="text/javascript">

var video = document.getElementById('MyVideo');
var url = 'http://yourdomain.com/yourvideo.mp4';
var mediaSource = new MediaSource(url);

video.src = URL.createObjectURL(mediaSource);
console.log(mediaSource);

</script>

@apt425410
Copy link

any idea about url mp4?

@IoIxD
Copy link

IoIxD commented May 31, 2019

By not using blobs.

<video src="https://example.com/video/video.mp4">

@edin-m
Copy link
Author

edin-m commented Aug 17, 2019

ALL, this is for playing a file from a local filesystem as an HTML5 video. Object URLs are also used with MediaSource.

@standfv
Copy link

standfv commented Feb 19, 2020

@

@carcinocron
Copy link

carcinocron commented Sep 22, 2020

By not using blobs.

well I arrived here from Google to figure out how to make blobs work because "not using blobs" is not working...

[Edit] I think my main problem was something about .mkvs being mostly unplayable in Chrome.

@fxtubcom
Copy link

fxtubcom commented Apr 2, 2021

I am looking for a way to download that video.

@sayan1999
Copy link

sayan1999 commented Jun 25, 2021

Works for a selected file or an url also, please check but it is not that fast:

<!DOCTYPE html>
<html>

<body>

<video id='myvideo' width="320" height="240" controls>
  Your browser does not support the video tag.
</video>

</body>
</html>

<script type="text/javascript">
  fetch('./21745_2160p.mp4')
  .then(res => res.blob()) // Gets the response and returns it as a blob
  .then(blob => {
    console.log(blob)
    document.querySelector('#myvideo').src = URL.createObjectURL(blob);
});
</script>

@munna111
Copy link

munna111 commented Oct 3, 2022

Working for me.

@aproni34f
Copy link

If you open blob url in new tab you just get playing video. So what the point of this method? It does not protect video from being downloaded.

@viktorzee
Copy link

How did you go about it, the video isn't playing on my end

@studiorebelrebel
Copy link

fetch('./21745_2160p.mp4')
.then(res => res.blob()) // Gets the response and returns it as a blob
.then(blob => {
console.log(blob)
document.querySelector('#myvideo').src = URL.createObjectURL(blob);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment