Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented May 26, 2018

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

@arachi007

This comment has been minimized.

Copy link

commented May 27, 2018

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

@MarioEisold

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Nov 29, 2018

any idea about url mp4?

@IoIxDButStronger

This comment has been minimized.

Copy link

commented May 31, 2019

By not using blobs.

<video src="https://example.com/video/video.mp4">
@edin-m

This comment has been minimized.

Copy link
Owner Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.