CODEWITHSUNDEEP
javascriptjqueryhtml
jinfy
jinfy

Reputation: 157

Video is not playing when visible in viewport?

I tried to play automatically when the video is partially visible on the view-port and same as once video is completely hidden i would like to stop playing. As of now its working fine only in window scroll.

The Problem is when video is completely visible on view port on page load the video is not playing, can anyone suggest what is the issue?

So the below code is not working properly:-

videojs("myPlayerID").ready(function() {
  var myPlayer = this;

  window.onscroll = checkIfVideoInView;

  function checkIfVideoInView() {
    if (isScrolledIntoView(myPlayerID)) {
      myPlayer.play();
    } else {
      myPlayer.pause();
    }
  }

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (
      elemBottom > docViewTop &&
      elemTop < docViewBottom
    );
  } 
});

Codepen URL:-

https://codepen.io/burner/pen/bxbzmR

Upvotes: 0

Views: 171

Answers (1)

The AOS
The AOS

Reputation: 81

With window.onload = checkIfVideoInView it will try to start playing on load. Some browsers, like Chrome, require users to interact with a document before a video with sound can be played. This means that to get autoplay working in all cases you also need to add a muted attribute to the video html tag.

  <video id="myPlayerID" muted ...></video>

https://codepen.io/theaos/pen/BOBggq

Upvotes: 2

Related Questions