Skip to content

Instantly share code, notes, and snippets.

@mohankumargupta

mohankumargupta/videojs-reload-after-failure.html

Last active June 13, 2019 13:14
Show Gist options
  • Save mohankumargupta/ef59dccba0b31e0014379366f3e0d5c4 to your computer and use it in GitHub Desktop.
Save mohankumargupta/ef59dccba0b31e0014379366f3e0d5c4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment