mohankumargupta/videojs-reload-after-failure.html

## videojs-reload-after-failure.html
<!doctype html>
<html>
<head>
  <title>Videojs 7</title>
  <meta charset="UTF-8">
  <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
</head>
<body style="margin-top:50px;">

 <div id="importantdiv"/>
 <div>
 	<video id="main-player" class="video-js vjs-default-skin"  controls="true"  style="margin:0 auto; width:940px; height:525px;">
   	<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  	</video>

  <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
  <script>
  var player;
  var playerHTML;
  var dodgy = 0;
   document.addEventListener("DOMContentLoaded", function() {
     console.log("loaded");
     playerHTML = document.querySelector('#main-player').outerHTML;
     player = videojs('main-player', {autoplay: true});
     setInterval(function() {
       var state = player.readyState();
       console.log('state:',state);
       if (state === 4) {
          dodgy = 0;
       }
       else {
          dodgy++;
          if (dodgy >= 3) {
            console.log('very dodgy. reload player.');
            reloadPlayer();
            dodgy = 0;
          }
       }
     }, 5000);
   });


  // Your AJAX function to reload the video
  function reloadPlayer(){
    fetch("http://vjs.zencdn.net/v/oceans.mp4").then(function(response) {
       console.log('got here');
       console.log(response.status);
       if (response.status === 200) {
         console.log('trying to reload player');
         player.dispose();
         document.getElementById('importantdiv').insertAdjacentHTML('afterend', playerHTML);
         player = videojs('main-player', {autoplay: true});
         player.play();
       }
    });
  }

  </script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Videojs 7</title>
	<meta charset="UTF-8">
	<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
	</head>
	<body style="margin-top:50px;">

	<div id="importantdiv"/>
	<div>
	<video id="main-player" class="video-js vjs-default-skin" controls="true" style="margin:0 auto; width:940px; height:525px;">
	<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
	</video>

	<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
	<script>
	var player;
	var playerHTML;
	var dodgy = 0;
	document.addEventListener("DOMContentLoaded", function() {
	console.log("loaded");
	playerHTML = document.querySelector('#main-player').outerHTML;
	player = videojs('main-player', {autoplay: true});
	setInterval(function() {
	var state = player.readyState();
	console.log('state:',state);
	if (state === 4) {
	dodgy = 0;
	}
	else {
	dodgy++;
	if (dodgy >= 3) {
	console.log('very dodgy. reload player.');
	reloadPlayer();
	dodgy = 0;
	}
	}
	}, 5000);
	});


	// Your AJAX function to reload the video
	function reloadPlayer(){
	fetch("http://vjs.zencdn.net/v/oceans.mp4").then(function(response) {
	console.log('got here');
	console.log(response.status);
	if (response.status === 200) {
	console.log('trying to reload player');
	player.dispose();
	document.getElementById('importantdiv').insertAdjacentHTML('afterend', playerHTML);
	player = videojs('main-player', {autoplay: true});
	player.play();
	}
	});
	}

	</script>
	</body>
	</html>