1

I have a 45 second video that I was able to compress to 4 Mo. I want the video to play smoothly and with autoplay, but it doesn't need to launch quickly as long as the poster image is present. So once it is fully loaded it should automatically play. I found this bit of javascript code but I am getting errors and I don't understand why.

<div class="video-container">
<video id="myvideo" controls autoplay muted poster="image.jpg" playsinline style="width: 100% !important;">
</video> </div>

<script type="text/javascript">
      var req = new XMLHttpRequest();
req.open('GET', 'example.com/wp-content/uploads/2019/07/video.mp4', true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if (this.status === 200) {
  var videoBlob = this.response;
  var vid = URL.createObjectURL(videoBlob); // IE10+
  // Video is now downloaded
  // and we can set it as source on the video element
  video.src = vid;
}
}
req.onerror = function() {
// Error
}
req.send();
document.getElementById("myvideo").src = vid; 
</script>

I am getting the error that the video is not defined on the line video.src = vid; and subsequently on the line document.getElementById("myvideo").src = vid;

In the Console the video has correctly been charged to the page, between 1 to 3 seconds of upload.

Rich
  • 107
  • 1
  • 13
  • take a look at https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706 ... should address your issue – Offbeatmammal Jul 24 '19 at 23:01
  • This code did work, so thanks, no more error, unfortunately the video is still choppy, specially in Firefox Mac – Rich Jul 25 '19 at 13:37
  • can you share a link to example video... may be encoding issue rather than loading – Offbeatmammal Jul 26 '19 at 00:00
  • Here's the link: http://ateliermanonpascual.com/collection-couture-with-video/ It's encoded in H264 – Rich Jul 26 '19 at 15:45
  • FWIW whatever you're doing, looks okay for me now in Firefox on macOS. Would suggest (if you've not done already) relocating the MOOV atom to the start of the file to help with seeking – Offbeatmammal Jul 28 '19 at 09:06
  • OK will do . Thanks. – Rich Jul 28 '19 at 09:18

1 Answers1

0

There are different ways to achieve smooth(er) playback, the way I've had luck with is 

    <video id="video" preload="auto" src="file.mp4" controls></video>

Setting the preload attribute to auto indicates that the browser may cache enough data that complete playback is possible without requiring a stop for further buffering.

The above example only preloads a couple of seconds so that the video can play smoothly without stopping to buffer, if you would like to preload the whole video before playback you could consult this example snippet 

  <video id="video" controls></video>

  <script>
    // Later on, after some condition has been met, set video source to the
    // preloaded video URL.
    video.src = 'https://cdn.com/small-file.mp4';
    video.play().then(_ => {
    // If preloaded video URL was already cached, playback started 
    //immediately.
     });
    </script>

Source : https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload

Alex
  • 39
  • 5
  • 1
    I am also getting pretty good results with this second method that preloads the entire video. On Windows Chrome, Edge, Opera and Firefox the video playback is smooth. On MacOs Safari plays it back correctly the second time, Chrome is OK and my only problem is Firefox. As indicated in your source I added this line before the video call – Rich Jul 25 '19 at 14:23