CODEWITHSUNDEEP
htmlvideoautoplay
Learning
Learning

Reputation: 20011

Video doesnt play on desktop browsers all the time

Video which for some reason doesn't play most of the time on Desktop.

<video autoplay loop id="video-background" class="video-bg" poster="assets/images/home-vid.jpg">
  <source  src="/assets/videos/home.mp4" type="video/mp4">
</video>

Video shoudl autoplay in loop when page is opened..

I tried on FF, Chrome it play once as Private browsing then it stopped playing again..

 $(document).ready(function () {
        $('#fullpage').fullpage({
            verticalCentered: true,
            //sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            afterRender: function () {
                //playing the video
                $('video').get(0).play();
            }
        });


   });

Upvotes: 0

Views: 51

Answers (1)

nourza
nourza

Reputation: 2321

You have to add playsinline autoplay muted loop, Chrome dont allow a video to autostart if it'ss not muted You can try this:

<video src="{{ asset('/assets/videos/home.mp4' )}}" muted autoplay loop playsinline></video>
And put this js after that:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});

Upvotes: 2

Related Questions