-
-
Save edin-m/889fa79a0fa124b1a8c3 to your computer and use it in GitHub Desktop.
| <!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> |
By not using blobs.
<video src="https://example.com/video/video.mp4">
ALL, this is for playing a file from a local filesystem as an HTML5 video. Object URLs are also used with MediaSource.
@
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.
I am looking for a way to download that video.
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>
Working for me.
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.
How did you go about it, the video isn't playing on my end
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);
});
any idea about url mp4?