Html – How to prevent html5 video from loading before playing

htmlhtml5-videovideo

I have several html5 videos on one page and I've just realized that when you visit the page, all the videos start loading even though I haven't clicked play on any of them.

Is there a way to only load a video once you click play, to prevent unnecessary downloading?

Best Answer

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" preload="none">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

</body>
</html>

Use Preload"none"

http://diveintohtml5.info/video.html

Related Solutions

Javascript – How to prevent buttons from submitting forms

You're using an HTML5 button element. Remember the reason is this button has a default behavior of submit, as stated in the W3 specification as seen here: W3C HTML5 Button

So you need to specify its type explicitly:

<button type="button">Button</button>

in order to override the default submit type. I just want to point out the reason why this happens.

Javascript – changing source on html5 video tag

I hated all these answers because they were too short or relied on other frameworks.

Here is "one" vanilla JS way of doing this, working in Chrome, please test in other browsers:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();
console.log({
  src: source.getAttribute('src'),
  type: source.getAttribute('type'),
});

setTimeout(function() {
  video.pause();

  source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
  console.log({
    src: source.getAttribute('src'),
    type: source.getAttribute('type'),
  });
}, 3000);

<video id="video" width="320" height="240"></video>

External Link

Best Answer

Related Solutions

Javascript – How to prevent buttons from submitting forms

Javascript – changing source on html5 video tag

Related Topic