Skip to content

Instantly share code, notes, and snippets.

@Judit

Judit/application.coffee

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Judit/9504674 to your computer and use it in GitHub Desktop.
Save Judit/9504674 to your computer and use it in GitHub Desktop.
Download ZIP
Use of HTML5 FileSystem API
Raw
application.coffee
#= require jquery
#= require jquery_ujs
#= require_tree .
$(document).ready ->
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem
window.fs = null
initFS = (->
window.requestFileSystem window.TEMPORARY, 1024*1024, (filesystem) ->
window.fs = filesystem
, (e) ->
console.log e.code
setTimeout ->
dirReader = fs.root.createReader()
dirReader.readEntries (entries) ->
if !entries.length
console.log 'Filesystem is empty.'
else
for entry in entries
entry.file (file) ->
fileURL = URL.createObjectURL(file)
if file.type == 'application/x-shockwave-flash'
flashNode = document.querySelector('#flash-container')
flashNode.data = fileURL
else
videoNode = document.querySelector('video')
videoNode.src = fileURL
videoNode.pause()
, ->
null
, 500
)
loadSelectedFile = (event) ->
URL = window.URL || window.webkitURL
file = this.files[0]
type = file.type
window.fs.root.getFile file.name, {create: true},
(fileEntry) ->
# create a writer that can put data in the file
fileEntry.createWriter (writer) ->
writer.onwriteend = ->
console.log 'finished!'
# this will read the contents of the current file
fr = new FileReader
fr.onloadend = ->
blob = new Blob([fr.result])
writer.write blob
console.log fr.readAsArrayBuffer(file)
, (e) ->
console.log e.code
inputNode = document.querySelector('input')
inputNode.addEventListener('change', loadSelectedFile, false)
initFS()
Raw
test.html.erb
<html>
<head>
<title>POC browser video</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*"/>
<video controls autoplay></video>
<object id='flash-container' type="application/x-shockwave-flash" width="500" height="500"></object>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment