Need help to fix video not auto play (but click on logo top left corner 1 times it trigger auto play)

Issue

$(document).ready(function () {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
    {
        $(".videoslide")
            .css("background","#000 url('https://giffindex.com/images/giffindexdeskmat2022.jpg') center")
            .css("background-size","cover")
            .css("min-height","300px")
        $(".videoslide .wrapper").css('background', 'rgba(0,0,0,.2)'); 
        $(".videoslide .cta, .videoslide h1, .videoslide p").delay(500).fadeIn(600); 
    }
    else {
        var posterImage = new Image(); 
        posterImage.src = "https://giffindex.com/images/giffindexmanufacturer2022.jpg";
        posterImage.onload = (function() {
           $(".videoslide .cta, .videoslide h1, .videoslide p").delay(400).fadeIn(300); 
        });
         
        var videoHero = document.getElementById("videoHero");
        videoHero.src = "https://giffindex.com/download/giffindexdeskmat1.mp4";
        videoHero.load();
        videoHero.addEventListener('loadeddata', function() {
            $(".videoslide .wrapper").css('background', 'rgba(0,0,0,0.1)'); 
            $(".videoslide video").fadeIn(200); 
            updateVideoHeight();
        }, false);
    }
    $(window).resize(function () {
        updateVideoHeight();
    });
});
function updateVideoHeight() {
    if($('.videoslide').height() > $('.videoslide video').height())  {
        $('.videoslide video').height($('.videoslide').height());
        $('.videoslide video').width('auto');

    } 
    
    if($('.videoslide').width() >= $('.videoslide video').width())  {
        $('.videoslide video').height('auto');
        $('.videoslide video').width('100%');

    }
}
<script src="js/video.js" defer></script>
<div class="videoslide">
    <video autoplay loop preload poster="https://www.giffindex.com/images/giffindexmanufacturer2022.jpg" id="videoHero" style="display:none;height:auto;"></video>

sorry never use this site before.
and the staff who write this code for our company website has left company almost 10 years cannot contact him to fix.


The site : www.giffindex.com
(I want the VDO auto play)
but the problem is , it need to click logo on top left corner 1 time for trigger VDO to running.

Please help any suggest code
Thank you in advance.

Solution

There are 3 ways how you could make autoload work:

  1. The user needs to interact with your website first. In your case, when clicking on the logo, autoload works, because the user has already interacted with your website.
  2. You could use setTimeout() to manipulate the browser (see this answer).
  3. You could use the attribute muted within your <video> tag. Since the audio will not be played, autoload will work (see this example).

Answered By – Reza Saadati

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.