Search code examples
htmlvideoconnectionalternate

Is there code to display alternate webpage if visiter's connection is very poor?

On the homepage of our website, we have a video that autoplays which you can click to enter the main site.

However when some people visit the website it does not load due to poor connection, and that page is left blank so they cannot access the site. Is there a way to detect if connection is slow and show an alternate text or webpage?

<head>
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<style>
html{
    width:100%;
    height:100%;
}
body {
  background: black;
position:fixed;
width: 100%;
height: 100%;}
</style>
<audio autoplay>

  <source src="http://files.cargocollective.com/598079/vape-sound_mixdown.mp3" type="audio/mpeg">

</audio>

<body bgcolor="black">
<video playsinline id="video1" width="100%" autoplay onended="run()" poster=“650mAh”>
  <source src="img/lores/vape_text_openingSMALLER.mp4" type="video/mp4">
  <source src="img/lores/vape_text_openingSMALLER.ogv" type="video/ogg">
  <source src="/img/lores/vape_text_openingSMALLER.webm" type="video/webm">
<a href="/650mah.html"> 650mAh </a>
  <object data="movie.mp4" width="100%">
    <embed width="100%" src="movie.swf">
  </object>

</video>

<a href="/650mah.html">
<video playsinline id="video2" width="100%" poster="http://650mah.com/img/650loop.gif" loop>
 <source src="img/lores/vape_text_loopSMALL.mp4" type="video/mp4">
  <source src="img/lores/vape_text_openingSMALL.ogv" type="video/ogg">
  <source src="img/lores/vape_text_loopSMALL.webm" type="video/webm">
  <object data="loop.mp4" width="100%" >
    <embed width="100%" src="loop.swf">
  </object>

</video>
</a>

<script>
$( "#video2" ).hide();
function run(){
   $( "#video1" ).hide();
    $( "#video2" ).show();
    document.getElementById("video2").play();
   };
</script>

Solution

  • I haven't tried it myself, but it's possible with JavaScript to determine the internet speed. Take a look at the link below.

    How to detect internet speed in JavaScript?

    If the internet connection is too slow, you could redirect to a different page using JavaScript/jQuery