HTML5 video loading

Question

The set up is that I've got a video that autoplays on page load in the hero of a website; just using a video tag with autoplay and loop. When the screen is below 700px I've set it to display none and an image takes its place, so far so good. However the video still streams in the background which pushes the page size up a lot. Currently I have this:

if ($(window).width() < 700) {
    $('.loopVideo').get(0).pause();
} 

Which sort of works but it still streams some of the video until the jquery kicks in. Does anyone know how I can hide the video as well as stop it streaming altogether when the screen width is less than 700px?

Thanks in advance

Answer 1

After display: none stop the video from playing:

// obj represents how you have identified the video element.
// Examples:
// var obj = document.getElementById('vid1');
// var obj = document.getElementsByTagName('video')[0];
// var obj = document.querySelector('video');

obj.pause();
obj.currentTime = 0;

If you want to kill the video do this as well:

obj.src = "";

• The demo below has two buttons, a checkbox, and a video in a loop.
• The orange/blue button will toggle the video .play() and pause() functions.
• The green/red button will toggle the video display: block/none and stops the video if it's playing.
• When the checkbox is checked and the green/red button is off (i.e. labeled "OFF" and is red), the video stream will be stopped.
• When testing the demo with the #onOff button, click it to "OFF" while the video is playing. Wait and listen for a "beep". If you don't hear one within a few seconds, then it tested successfully.

Snippet

$(function() {

  var vid = document.getElementById('vid1');
  var $vid = $('#vid1');
  var $kill = $('#kill:checked');

  $('#onOff').on('click', function(e) {
    $(this).toggleClass('on off');
    $vid.toggleClass('here gone');
    if (vid.playing) {
      vid.pause();
      vid.currentTime = 0;
      if ($kill) {
        vid.src = "";
      }
    } else {
      vid.load();
      vid.src = "https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4";
    }
    /* ======[.pause() then .currentTime() = 0 
    [ stops the video instead of pausing it.
    =========[ Kill a stream by .src="" and
    use .load() and assign .src= "new path" */

  });



  $('#playPause').on('click', function(e) {
    if (vid.paused) {
      vid.play();
      this.classList.add('play');
      this.classList.remove('pause');
    } else {
      vid.pause();
      this.classList.add('pause');
      this.classList.remove('play');
    }
  });
});

* {
  outline: none;
}
here {
  display: block;
}
.gone {
  display: none;
}
.flex {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 30px 0 0 0;
}
fieldset {
  height: 100px;
  width: 100px;
  text-align: left;
}
figure {
  margin: 0;
  padding: 0;
  width: 320px;
}
button {
  width: 32px;
  line-height: .8;
  padding: 2px 3px 0 0;
  font-weight: 900;
  font-size: 12px;
  background: transparent;
  border: none;
  margin: 10px 0;
}
button#playPause.pause:before {
  content: "\a0▶\a0";
  font-size: 16px;
  line-height: .40;
  color: cyan;
  background: orange;
}
button#playPause.play:before {
  content: "\a0❙❙\a0";
  font-size: 16px;
  color: orange;
  background: cyan;
  vertical-align: middle;
}
button#onOff.on:before {
  content: '\a0ON\a0';
  background: yellowgreen;
}
button#onOff.off:before {
  content: '\a0OFF\a0';
  background: crimson;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<section class="flex">
  <figure id="box1" class="box">
    <video id="vid1" class="here" poster="https://glpjt.s3.amazonaws.com/so/av/vs34s3.png" loop preload="none" width="320">
      <source src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4" type="video/mp4">
    </video>
  </figure>


  <fieldset>
    <legend>Control Panel</legend>
    <button id="onOff" class="on"></button>
    <br/>
    <input id="kill" type="checkbox">
    <label for="kill">Kill Stream</label>
    <button id="playPause" class="pause"></button>
  </fieldset>
</section>