Databases
StackOverflow2013
Postsdbo
POHTML5: Play local video from iPad camera roll
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5: Play local video from iPad camera roll
    text
    copied!<p>I found this SO post, but it is out of date: <a href="https://stackoverflow.com/questions/3924711/play-a-local-video-from-ipad-in-an-html-5-webpage">Play a local video from iPad in an HTML 5 webpage</a></p> <p>With iOS 6 came the ability to access the camera roll for uploading a file (e.g., .mov files captured from iPad camera). I am not sure who to give credit to, but I found a jsFiddle that uses an input field to grab a local file and load it into the video element for playback. This works on the desktop accept for .mov files, but removing "video/*" from the accept attribute allows the input file to select a .mov from local, and forcing the file.type to "video/mp4" in the JS allows the .mov to play in the video element.</p> <p>See jsFiddle referenced above: <a href="http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/" rel="nofollow noreferrer">http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/</a></p> <p>However, when it comes to this working in mobile safari the file still fails to load, even though you see a preview thumbnail and file name in the file input field. I added a link to the page concatenating "?dl=1" to the blob: url, but clicking it just results in mSafari saying “invalid address” even though a link to a hosted .mov plays in quicktime. Ultimately, I want to be able to select a video from the camera roll, play it in an html video player, and (ideally) store the source path of that file in a db to be accessed at a later time. What piece am I missing?</p> <p>See my edited version of the jsFiddle working here: <a href="http://lt.umn.edu/email/" rel="nofollow noreferrer">http://lt.umn.edu/email/</a></p> <p>JS:</p> <pre><code>playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; //var type = file.type; var type = "video/mp4"; var videoNode = document.querySelector('video'); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); var message = 'Can play type "' + type + '": ' + canPlay; var isError = canPlay === 'no'; //displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); var tempURL = fileURL+'?dl=1'; var tempText = '&lt;a href="'+tempURL+'?dl=1"&gt;'+tempURL+'?dl=1&lt;/a&gt;'; displayMessage(tempText, isError); videoNode.src = fileURL; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload