binux/html5_video.html

## html5_video.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input type="file" id="file" name="file" /><br>
  <button class=load id="load0" data-start="0" data-stop="0.1" disabled>load 0-10%</button>
  <button class=load id="load5" data-start="0.1" data-stop="0.2" disabled>load 10%-20%</button>
  <button class=load id="load10" data-start="0.2" data-stop="0.5" disabled>load 20%-50%</button>
  <button class=load id="load10" data-start="0.9" data-stop="1" disabled>load 90%-100%</button>
  <button id="set_src" disabled>play</button>
  <video id="video" controls width="100%">not supported</video>

<script>
function handleFileSelect(evt) {
  var files = evt.target.files;
  var file = files[0];
  var on_error_time = 0;

  //window.file = file;
  //video.src = URL.createObjectURL(file);
  //video.play();

  function onInitFS(fs) {
    // remove all entries
    var dirReader = fs.root.createReader();
    var null_function = function() {};
    dirReader.readEntries(function(entries) {
      for (var i = 0, entry; entry = entries[i]; ++i) {
        if (entry.isDirectory) {
          entry.removeRecursively(null_function);
        } else {
          entry.remove(null_function);
        }
      }
    });
    console.log('cleared filesystem');

    fs.root.getFile('1.mp4', {create: true, exclusive: true},
    function(myfile) {
      window.myfile = myfile;
      myfile.createWriter(function(fw) {
        var buttons = document.querySelectorAll('.load');
        for (var i=0; i < buttons.length; i++) {
          buttons[i].disabled = false;
          buttons[i].addEventListener('click', function(evt) {
            var start = eval(this.dataset.start)*file.size;
            var stop = eval(this.dataset.stop)*file.size;
            fw.seek(start);
            fw.write(file.slice(start, stop));
            set_src.disabled = true;
            video.load();
          });
        }

        fw.onwriteend = function() {
          set_src.disabled = false;
        };

        set_src.addEventListener('click', function(evt) {
          video.src = myfile.toURL();
          video.autoplay = false;
          video.preload = "metadata";
          setup_video(video);

          video.addEventListener("canplay", function() {
            if (on_error_time) {
              video.currentTime = on_error_time;
              video.play();
            }
          });

          video.addEventListener('error', function() {
            console.log('video onerror');
            on_error_time = Math.max(0, video.currentTime);
            setTimeout(function() {
                video.load();
            }, 1000);
          });
          video.play();
        });
      });
    });
  }
  window.requestFileSystem(window.TEMPORARY, file.size, onInitFS);
}

    function setup_video(video) {
        setInterval( function() {
            /*
              for (var i=0; i<video.buffered.length; i++) {
              console.log('bufrange',i,video.buffered[i]);
              }
            */
            //console.log('network state', video.networkState);
        }, 1000 );
        // video.startTime
        video.addEventListener("readystatechange", function(evt) { console.log('readystatechange'); } );
        video.addEventListener("stalled", function(evt) { console.log("stalled",evt); } );
        video.addEventListener("durationchange", function(evt) { console.log('durationchange',evt); } );
        video.addEventListener("loadstart", function(evt) { console.log("load start",evt); } );
        video.addEventListener("abort", function(evt) { console.log("abort",evt); } );
        video.addEventListener("loadedmetadata", function(evt) { console.log("got metadata",evt); } );
        video.addEventListener("error", function(evt) { console.log("got error",evt);
                                                        console.log('video state: ',video.readyState);
                                                      } );
        video.addEventListener("canplay", function(evt) { console.log('canplay',evt); } );
        video.addEventListener("progress", function(evt) { console.log("progress",evt); } );
        video.addEventListener("seek", function(evt) { console.log('seek',evt); } );
        video.addEventListener("seeked", function(evt) { console.log('seeked',evt); } );
        video.addEventListener("ended", function(evt) { console.log('ended',evt); } );
        //video.addEventListener("timeupdate", function(evt) { console.log('timeupdate',evt); } );
        video.addEventListener("pause", function(evt) { console.log('pause',evt); } );
        video.addEventListener("play", function(evt) { console.log('play',evt); } );
        video.addEventListener("suspend", function(evt) {
            console.log('suspend event',evt);
        });
        //video.load();
    }

document.getElementById('file').addEventListener('change', handleFileSelect);
window.requestFileSystem = window.webkitRequestFileSystem || window.requestFileSystem;
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<input type="file" id="file" name="file" /><br>
	<button class=load id="load0" data-start="0" data-stop="0.1" disabled>load 0-10%</button>
	<button class=load id="load5" data-start="0.1" data-stop="0.2" disabled>load 10%-20%</button>
	<button class=load id="load10" data-start="0.2" data-stop="0.5" disabled>load 20%-50%</button>
	<button class=load id="load10" data-start="0.9" data-stop="1" disabled>load 90%-100%</button>
	<button id="set_src" disabled>play</button>
	<video id="video" controls width="100%">not supported</video>

	<script>
	function handleFileSelect(evt) {
	var files = evt.target.files;
	var file = files[0];
	var on_error_time = 0;

	//window.file = file;
	//video.src = URL.createObjectURL(file);
	//video.play();

	function onInitFS(fs) {
	// remove all entries
	var dirReader = fs.root.createReader();
	var null_function = function() {};
	dirReader.readEntries(function(entries) {
	for (var i = 0, entry; entry = entries[i]; ++i) {
	if (entry.isDirectory) {
	entry.removeRecursively(null_function);
	} else {
	entry.remove(null_function);
	}
	}
	});
	console.log('cleared filesystem');

	fs.root.getFile('1.mp4', {create: true, exclusive: true},
	function(myfile) {
	window.myfile = myfile;
	myfile.createWriter(function(fw) {
	var buttons = document.querySelectorAll('.load');
	for (var i=0; i < buttons.length; i++) {
	buttons[i].disabled = false;
	buttons[i].addEventListener('click', function(evt) {
	var start = eval(this.dataset.start)*file.size;
	var stop = eval(this.dataset.stop)*file.size;
	fw.seek(start);
	fw.write(file.slice(start, stop));
	set_src.disabled = true;
	video.load();
	});
	}

	fw.onwriteend = function() {
	set_src.disabled = false;
	};

	set_src.addEventListener('click', function(evt) {
	video.src = myfile.toURL();
	video.autoplay = false;
	video.preload = "metadata";
	setup_video(video);

	video.addEventListener("canplay", function() {
	if (on_error_time) {
	video.currentTime = on_error_time;
	video.play();
	}
	});

	video.addEventListener('error', function() {
	console.log('video onerror');
	on_error_time = Math.max(0, video.currentTime);
	setTimeout(function() {
	video.load();
	}, 1000);
	});
	video.play();
	});
	});
	});
	}
	window.requestFileSystem(window.TEMPORARY, file.size, onInitFS);
	}

	function setup_video(video) {
	setInterval( function() {
	/*
	for (var i=0; i<video.buffered.length; i++) {
	console.log('bufrange',i,video.buffered[i]);
	}
	*/
	//console.log('network state', video.networkState);
	}, 1000 );
	// video.startTime
	video.addEventListener("readystatechange", function(evt) { console.log('readystatechange'); } );
	video.addEventListener("stalled", function(evt) { console.log("stalled",evt); } );
	video.addEventListener("durationchange", function(evt) { console.log('durationchange',evt); } );
	video.addEventListener("loadstart", function(evt) { console.log("load start",evt); } );
	video.addEventListener("abort", function(evt) { console.log("abort",evt); } );
	video.addEventListener("loadedmetadata", function(evt) { console.log("got metadata",evt); } );
	video.addEventListener("error", function(evt) { console.log("got error",evt);
	console.log('video state: ',video.readyState);
	} );
	video.addEventListener("canplay", function(evt) { console.log('canplay',evt); } );
	video.addEventListener("progress", function(evt) { console.log("progress",evt); } );
	video.addEventListener("seek", function(evt) { console.log('seek',evt); } );
	video.addEventListener("seeked", function(evt) { console.log('seeked',evt); } );
	video.addEventListener("ended", function(evt) { console.log('ended',evt); } );
	//video.addEventListener("timeupdate", function(evt) { console.log('timeupdate',evt); } );
	video.addEventListener("pause", function(evt) { console.log('pause',evt); } );
	video.addEventListener("play", function(evt) { console.log('play',evt); } );
	video.addEventListener("suspend", function(evt) {
	console.log('suspend event',evt);
	});
	//video.load();
	}

	document.getElementById('file').addEventListener('change', handleFileSelect);
	window.requestFileSystem = window.webkitRequestFileSystem \|\| window.requestFileSystem;
	</script>
	</body>
	</html>