0

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>
66t00
  • 5
  • 3
  • 2
    Solution: do not use an autoplay-video on your startpage. It will also piss off people with fast connections. Don't waste my mobile highspeed-volume by loading crappy autoplay videos! – piet.t May 11 '18 at 11:09
  • The site is only visited by a few people, it's an art project which is why it autoplays a video. also, for mobile use, the page redirects to another page which loads a gif instead of a video so not to waste mobile data.... @piet.t – 66t00 May 11 '18 at 11:28

2 Answers2

0

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

Jordy
  • 320
  • 2
  • 15
0

One other approach is that you can have a single web page and display an image or text as an alternative until the video has loaded.

The HTML5 'canplaythrough' event is fired when the browser has the video donbwloaded and play it all:

When this fires you can replace the image or text with the video.

Mick
  • 24,231
  • 1
  • 54
  • 120
  • I have added our code into the initial question, could you show me how to do that? Thank you :) – 66t00 May 19 '18 at 12:44