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

Revisions

  1. edin-m renamed this gist Mar 10, 2015. 1 changed file with 0 additions and 0 deletions.
    0 main.html → html5-video-play-file-blob.html
    View file
    File renamed without changes.
  2. edin-m renamed this gist Mar 4, 2015. 1 changed file with 0 additions and 0 deletions.
    0 HTML video play file blob object url → main.html
    View file
    File renamed without changes.
  3. edin-m created this gist Feb 28, 2015.
    29 changes: 29 additions & 0 deletions HTML video play file blob object url
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <!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>