ericxtang/gist:fbb973974ce2ea4e5dce1922b70ef341

## gistfile1.txt
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
  <style>
    .noSrc {
      width: 100%;
      height: 100%;
      background-color: black;
    }

    p {
      color: #ffffff;
      text-align: center;
      font-size: 20px;
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>

<body>
  <div id="video-player">
    <video-js data-matomo-title="test-stream" id="my-player" class="vjs-default-skin" controls preload="auto"
      style=" width: 100%; height: 100%">
    </video-js>
  </div>
  <div class="noSrc" id="noSrc">
    <p>El streaming esta offline</p>
  </div>
</body>

<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

<script>

  const sources = ["https://fra-cdn.livepeer.com/hls/f2deswyp8w8o8t77/index.m3u8", "https://mdw-cdn.livepeer.com/hls/f2deswyp8w8o8t77/index.m3u8"];

  var video = document.getElementById("my-player");
  var noSrcDiv = document.getElementById("noSrc");
  var player = null;

  async function loadSrc() {
      for (src in sources) {
        checkSource(sources[src]);
      }
    }

  function parseRequest(data) {
    const text = data;
    var pos = text.split("\n");
    if (pos[1] == "#EXT-X-ERROR: Stream open failed\r") {
      return false;
    }
    return true;
  }

  async function checkSource(src) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', src, true);  // `false` makes the request synchronous

    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          if (!parseRequest(xhr.responseText)) {
              disposePlayer(src);
          }else if(player === null){
            buildPlayer(src);
          }
        }
      } else {
        console.error(xhr.statusText);
        disposePlayer();
      }
    }
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
      disposePlayer();
      clearInterval(myInterval);
    };
    xhr.send(null);
  };

  function disposePlayer(src){
    if(player !== null && player.currentSrc() === src){
      console.log("trying to dispose", src);
      player.dispose();
      noSrcDiv.style.display = "block";
      console.log(player);
      var div = document.getElementById("video-player");
      div.insertAdjacentHTML( 'beforeend', "<video-js data-matomo-title=\"test-stream\" id=\"my-player\" class=\"vjs-default-skin\" controls preload=\"auto\" style=\" width: 100%; height: 100%\">");
      player = null;
    }
  }

  function buildPlayer(src) {
    console.log("building player", src);
    player = videojs("my-player", {
      errorDisplay: false
    });
    player.src({
      src: src,
      type: "application/x-mpegURL",
    });
    noSrcDiv.style.display = "none";
  }

  loadSrc();
  setTimeout(function tick() {
    loadSrc();
    timerId = setTimeout(tick, 15000); // (*)
  }, 15000);


</script>

</html>
	<html>

	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
	<style>
	.noSrc {
	width: 100%;
	height: 100%;
	background-color: black;
	}

	p {
	color: #ffffff;
	text-align: center;
	font-size: 20px;
	padding: 0px;
	margin: 0px;
	}
	</style>
	</head>

	<body>
	<div id="video-player">
	<video-js data-matomo-title="test-stream" id="my-player" class="vjs-default-skin" controls preload="auto"
	style=" width: 100%; height: 100%">
	</video-js>
	</div>
	<div class="noSrc" id="noSrc">
	<p>El streaming esta offline</p>
	</div>
	</body>

	<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

	<script>

	const sources = ["https://fra-cdn.livepeer.com/hls/f2deswyp8w8o8t77/index.m3u8", "https://mdw-cdn.livepeer.com/hls/f2deswyp8w8o8t77/index.m3u8"];

	var video = document.getElementById("my-player");
	var noSrcDiv = document.getElementById("noSrc");
	var player = null;

	async function loadSrc() {
	for (src in sources) {
	checkSource(sources[src]);
	}
	}

	function parseRequest(data) {
	const text = data;
	var pos = text.split("\n");
	if (pos[1] == "#EXT-X-ERROR: Stream open failed\r") {
	return false;
	}
	return true;
	}

	async function checkSource(src) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', src, true); // `false` makes the request synchronous

	xhr.onload = function (e) {
	if (xhr.readyState === 4) {
	if (xhr.status === 200) {
	if (!parseRequest(xhr.responseText)) {
	disposePlayer(src);
	}else if(player === null){
	buildPlayer(src);
	}
	}
	} else {
	console.error(xhr.statusText);
	disposePlayer();
	}
	}
	xhr.onerror = function (e) {
	console.error(xhr.statusText);
	disposePlayer();
	clearInterval(myInterval);
	};
	xhr.send(null);
	};

	function disposePlayer(src){
	if(player !== null && player.currentSrc() === src){
	console.log("trying to dispose", src);
	player.dispose();
	noSrcDiv.style.display = "block";
	console.log(player);
	var div = document.getElementById("video-player");
	div.insertAdjacentHTML( 'beforeend', "<video-js data-matomo-title=\"test-stream\" id=\"my-player\" class=\"vjs-default-skin\" controls preload=\"auto\" style=\" width: 100%; height: 100%\">");
	player = null;
	}
	}

	function buildPlayer(src) {
	console.log("building player", src);
	player = videojs("my-player", {
	errorDisplay: false
	});
	player.src({
	src: src,
	type: "application/x-mpegURL",
	});
	noSrcDiv.style.display = "none";
	}

	loadSrc();
	setTimeout(function tick() {
	loadSrc();
	timerId = setTimeout(tick, 15000); // (*)
	}, 15000);


	</script>

	</html>