Echooff3/VideoPlayer.html

## VideoPlayer.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css" type="text/css" media="screen">

  <style type="text/css" media="screen">
  video {
    max-width: 100%;
    height: auto;
    -webkit-transform: translateZ(0);
    	-moz-transform: translateZ(0);
    	-ms-transform: translateZ(0);
    	-o-transform: translateZ(0);
    	transform: translateZ(0);
  }
    video::-webkit-media-controls {
      display: none;
    }

    div.playbtn {
    	font-size: 100px;
    	width: 1em;
    }

    div.playbtn::after {
    	content: ' ';
    	display: inline-block;
    	width: 0;
    	height: 0;
    	border-style: solid;
    	border-color: transparent rgba(0, 0, 0, .75);
    	border-width: .6em 0 .6em 1em;
    }

    div.playbtn.pause::after {
    	height: 1em;
    	width: .3em;
    	border-width: 0 .3em;
    }
  </style>

</head>
<body>

  <video controls>
    <source src="ls_sloth.mp4" type="video/mp4"></source>
  </video>

  <audio src="ls_sloth.mp4"></audio>


  <div class="playbtn"></div>

  <div id="status" style="height: 5em; overflow:scroll;position:fixed;bottom:0;left:0;right:0;"></div>

  <script type="text/javascript">

  function updateSource(url){
    vid.querySelector('source').src = url;
    vid.load();

    aud.src = url;
    vid.play();
    aud.play();
    vid.pause();
  }

  (function(w,d){
    w.vid = d.querySelector('video');
    w.aud = d.querySelector('audio');
    w.btn = d.querySelector('.playbtn');

    btn.addEventListener('click', startTouch);
    //vid.addEventListener('click',vidFullscreen);

    var started = false;

    function vidFullscreen(){
      vid.webkitEnterFullscreen();
    }

    function startTouch(e){
      console.log('start playing');
      console.log(started);

      if( started ) {
        console.log(aud.playing);
        if(!aud.paused) {
          btn.className = btn.className.replace(' pause','');
          aud.pause();
        } else {
          btn.className += ' pause';
          aud.play();
        }
      }

      !started && startAnimating(30);

    }


    var events = ['abort','canplay','canplaythrough','durationchange','emptied','encrypted ','ended','error','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','mozaudioavailable','onencrypted','pause','play','playing','progress','ratechange','seeked','seeking','stalled','suspend','timeupdate','volumechange','waiting'];

    function logEvent(ev){
      console.log(ev.type,this);
      var p = d.createElement('p');
      p.innerText = this.nodeName + ': '+ ev.type + ' ' + aud.paused;
      d.getElementById('status').appendChild(p);
      p.scrollIntoView(true);
    }

    for(i=0;i<events.length;i++){
      console.log(events[i]);
      aud.addEventListener(events[i],logEvent);
      vid.addEventListener(events[i],logEvent);
    }

    aud.addEventListener('ended', function(){
      updateSource('through_the_fire_and_flames.mp4');
      aud.removeEventListener('ended');
    })

    vid.addEventListener("timeupdate", function() {
    vid.pause();
    }, false);

    function startAnimating(fps) {
        started = !started;
        fpsInterval = 1000 / fps;
        then = Date.now();
        startTime = then;
        btn.className += ' pause';
        vid.play();
        aud.play();
        vid.pause();
        syncVideo();
    }

    function syncVideo(time) {

      now = Date.now();
      elapsed = now - then;

      if(elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        //console.log(aud.currentTime);

        if(!aud.paused) {
          vid.currentTime = aud.currentTime;
          //vid.play();
          //vid.pause();
        }

      }
      requestAnimationFrame(syncVideo);
    }

    w.startAnimating = startAnimating;

  })(window,document)
  </script>
</body>
</html>

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="reset.css" type="text/css" media="screen">

	<style type="text/css" media="screen">
	video {
	max-width: 100%;
	height: auto;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	}
	video::-webkit-media-controls {
	display: none;
	}

	div.playbtn {
	font-size: 100px;
	width: 1em;
	}

	div.playbtn::after {
	content: ' ';
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent rgba(0, 0, 0, .75);
	border-width: .6em 0 .6em 1em;
	}

	div.playbtn.pause::after {
	height: 1em;
	width: .3em;
	border-width: 0 .3em;
	}
	</style>

	</head>
	<body>

	<video controls>
	<source src="ls_sloth.mp4" type="video/mp4"></source>
	</video>

	<audio src="ls_sloth.mp4"></audio>


	<div class="playbtn"></div>

	<div id="status" style="height: 5em; overflow:scroll;position:fixed;bottom:0;left:0;right:0;"></div>

	<script type="text/javascript">

	function updateSource(url){
	vid.querySelector('source').src = url;
	vid.load();

	aud.src = url;
	vid.play();
	aud.play();
	vid.pause();
	}

	(function(w,d){
	w.vid = d.querySelector('video');
	w.aud = d.querySelector('audio');
	w.btn = d.querySelector('.playbtn');

	btn.addEventListener('click', startTouch);
	//vid.addEventListener('click',vidFullscreen);

	var started = false;

	function vidFullscreen(){
	vid.webkitEnterFullscreen();
	}

	function startTouch(e){
	console.log('start playing');
	console.log(started);

	if( started ) {
	console.log(aud.playing);
	if(!aud.paused) {
	btn.className = btn.className.replace(' pause','');
	aud.pause();
	} else {
	btn.className += ' pause';
	aud.play();
	}
	}

	!started && startAnimating(30);

	}


	var events = ['abort','canplay','canplaythrough','durationchange','emptied','encrypted ','ended','error','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','mozaudioavailable','onencrypted','pause','play','playing','progress','ratechange','seeked','seeking','stalled','suspend','timeupdate','volumechange','waiting'];

	function logEvent(ev){
	console.log(ev.type,this);
	var p = d.createElement('p');
	p.innerText = this.nodeName + ': '+ ev.type + ' ' + aud.paused;
	d.getElementById('status').appendChild(p);
	p.scrollIntoView(true);
	}

	for(i=0;i<events.length;i++){
	console.log(events[i]);
	aud.addEventListener(events[i],logEvent);
	vid.addEventListener(events[i],logEvent);
	}

	aud.addEventListener('ended', function(){
	updateSource('through_the_fire_and_flames.mp4');
	aud.removeEventListener('ended');
	})

	vid.addEventListener("timeupdate", function() {
	vid.pause();
	}, false);

	function startAnimating(fps) {
	started = !started;
	fpsInterval = 1000 / fps;
	then = Date.now();
	startTime = then;
	btn.className += ' pause';
	vid.play();
	aud.play();
	vid.pause();
	syncVideo();
	}

	function syncVideo(time) {

	now = Date.now();
	elapsed = now - then;

	if(elapsed > fpsInterval) {
	then = now - (elapsed % fpsInterval);

	//console.log(aud.currentTime);

	if(!aud.paused) {
	vid.currentTime = aud.currentTime;
	//vid.play();
	//vid.pause();
	}

	}
	requestAnimationFrame(syncVideo);
	}

	w.startAnimating = startAnimating;

	})(window,document)
	</script>
	</body>
	</html>