CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
Iván
Iván

Reputation: 179

Change HTML 5 autoplayed video source dynamically

On my website https://cravydev.netlify.com I'm trying to change the video dynamically when the different headlines are in viewport.

I'm using a div with HTML 5 autoplay and loop properties, but not able yet to change the video source and load again when the specific headline is on screen. Here are the details.

HTML

<div class="iphone-sticky"></div>
  <div class="iphone-video">
     <video autoplay loop muted poster="assets/img/poster.png" id="iphonevideo">
       <source id="video1" src="assets/img/iphone-video.mp4" type="video/mp4">
       <source id="video2" src="assets/img/iphone-video-1.mp4" type="video/mp4">
       </video>

JS

//Detect is element is in viewport
$(window).on('resize scroll', function() {
var player = document.getElementById('iphonevideo2');
if ($('#headline2').isInViewport()) {
    var source = document.getElementById('video1');
    $(source).attr("src", "assets/img/iphone-video-1.mp4");
    player.pause();
    player.load();
} else if ($('#headline3').isInViewport()) {
    var source = document.getElementById('video1');
    $(source).attr("src", "assets/img/iphone-video.mp4");
    player.pause();
    player.load();
}

});

EDIT

I have been able to solve it thanks to Kley comment. Now the problem is that the js logic does not check constantly the viewport visibility of headlines, only once. Also, the video is played while scrolling and the poster image appears, making the whole experience a little bit weird.

Any suggestion to solve that?

Thanks!

Upvotes: 0

Views: 94

Answers (1)

Kley Andromorfia
Kley Andromorfia

Reputation: 113

Check the page, it's not the viewport ()

I could tell you that you are changing the src every time you scroll while it is visible, this is causing the video to restart. You must make a validation, if it has already been changed the src should not be changed again.

Note that # headline2 is not visible when # headline3 is a bit up.

you have to scroll down until the end of the page to enter this condition.

You could use another smaller element at the beginning of each #headline to do this validation.

you could use the first p of the #headline

For example:

$(window).on('resize scroll', function() {
   var player = document.getElementById('iphonevideo2');
   if ($('#headline2 p').eq(0).isInViewport()) {

      var source = document.getElementById('video1');
      var url = "assets/img/iphone-video-1.mp4";
      var src = $(source).attr("src");
      // validate if you already have the src
      if(src==url) return; // if exists src leaves function

      $(source).attr("src", url);
      player.pause();
      player.load();

  } else if ($('#headline3 p').eq(0).isInViewport()) {

      var source = document.getElementById('video1');
      var src = $(source).attr("src");
      var url = "assets/img/iphone-video.mp4";
      // validate if you already have the src
      if(src==url) return; // if exists src leaves function

      $(source).attr("src", url);
      player.pause();
      player.load();

  }
})

Upvotes: 1

Related Questions