Skip to content

Instantly share code, notes, and snippets.

@edin-m

edin-m/html5-video-play-file-blob.html

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.
Download ZIP
HTML video play file blob object url
Raw
html5-video-play-file-blob.html
<!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>
@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