Last active
March 31, 2020 21:20
-
-
Save unRob/3bd07a012597aa959c92 to your computer and use it in GitHub Desktop.
Safari vs `video.source = Blob`
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <title>Safari VS `video.source = Blob`</title> | |
| </head> | |
| <body> | |
| <button id="button">Select a video file</button> | |
| <input id="file" type="file" /> | |
| <video width="100%" height="100%" controls></video> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var fileInput = document.querySelector('#file'); | |
| var video = document.querySelector('video'); | |
| fileInput.addEventListener('change', function(evt){ | |
| evt.preventDefault(); | |
| var file = evt.target.files[0]; | |
| if ( file.type.split('/')[0] != 'video' ){ | |
| alert('Please select a file with a `video/*` mime-type'); | |
| return false; | |
| } | |
| var url = window.URL.createObjectURL(file); | |
| video.src = url; | |
| video.addEventListener('progress', function(evt){ | |
| console.log(video.duration); | |
| video.play(); | |
| }, false); | |
| video.addEventListener('error', function(err){ | |
| console.error(video.error, err); | |
| alert('nay :('); | |
| }); | |
| }); | |
| console.log(document.querySelector('button')); | |
| document.querySelector('button').addEventListener('mouseup', function(){ | |
| fileInput.click(); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #000; | |
| margin: 0; | |
| padding: 0; | |
| font: 18px/1.8em 'Avenir Next', Avenir, sans-serif; | |
| } | |
| button { | |
| display: block; | |
| background: #666; | |
| border: 3px solid #aaa; | |
| color: #aaa; | |
| text-transform: uppercase; | |
| width: 50%; | |
| max-width: 410px; | |
| padding: 5px 0; | |
| font-weight: bold; | |
| letter-spacing: .2em; | |
| margin: 1em auto; | |
| text-align: center; | |
| font-family: inherit; | |
| font-size: 1.5em; | |
| border-radius: 1px; | |
| } | |
| #file { | |
| width: 0; | |
| height: 0; | |
| overflow: hidden; | |
| margin: 0; | |
| padding: 0; | |
| line-height: 0; | |
| } |
@alecat88 I'm not sure, it was last updated nearly 5 years ago, and browsers change really fast. Try it out locally to know for sure!
I did a quick search with the title of this gist (Safari vs video.source = Blob) and found this working example: https://bl.ocks.org/unRob/3bd07a012597aa959c92
Yeah, that refreshed my memory, searching for that url i came up with a bug about it in webkit, and a stack overflow post I wrote about it.
Hope that helps!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
does this works?