background video not working

No idea why, but since recent this script doesn't seem to work anymore. It shows the first frame of the video, but doesn't play.

This is the js:

Code:

---

    //background video settings
        if (matchMedia('(min-width: 640px)').matches) {
                var videobackground = new $.backgroundVideo($('body'), {
                        "align": "centerXY",
                        "autoplay": 1,
                        "controls": 0,
                        "autohide": 1,
                        "loop": 1,
                        "muted": true,
                        "volume": 0,
                        "width": 1280,
                        "height": 720,
                        "path": "portfolio/videos/",
                        "filename": "namefile",
                        "types": ["mp4"]
                });               
        }
        else
        {
                $('body').addClass('no-video');
        }

---

and here: jQuery Background video plugin for jQuery

You can see it "work" on top of this page: https://brunomazereel.com/

Could anyone help me out, please?
Thanks.

Hi there chechu,

Both Google Chrome and firefox now prevent video and
audio autoplay unless the muted attribute is included.

Your basic code should look something like this...

Code:

---


 <video preload muted autoplay loop>
  <source src="portfolio/videos/sofahost2.mp4" type="video/mp4">
 </video>

---

...for it to play as you desire. ;)

Of course, you may not be able to set the value in
the HTML, as you decided, for some strange reason
to use javascript to display it and the javascript is
ignoring this...

Code:

---


    //background video settings
        if (matchMedia('(min-width: 640px)').matches) {
                var videobackground = new $.backgroundVideo($('body'), {
                        "align": "centerXY",
                        "autoplay": 1,
                        "controls": 0,
                        "autohide": 1,
                        "loop": 1,
                        "muted": true,
                        "volume": 0,
                        "width": 1280,
                        "height": 720,
                        "path": "portfolio/videos/",
                        "filename": "namefile",
                        "types": ["mp4"]
                });               
        }
        else
        {
                $('body').addClass('no-video');
        }

---

To get round this use this instead...

Code:

---


    //background video settings
        if (matchMedia('(min-width: 640px)').matches) {
                var videobackground = new $.backgroundVideo($('body'), {
                        "align": "centerXY",
                        "autoplay": 1,
                        "controls": 0,
                        "autohide": 1,
                        "loop": 1,
                        "volume": 0,
                        "width": 1280,
                        "height": 720,
                        "path": "portfolio/videos/",
                        "filename": "sofahost2",
                        "types": ["mp4"]
                });       
            document.getElementById( 'video_background' ).muted = true ;       
        }
        else
        {
                $('body').addClass('no-video');
        }

---

coothead

Works like a charm.
Thanks a lot!

No problem, you're very welcome. ;)

coothead