-1

I'm using a video on my website. I use sound on dekstop but i want the video to mute on mobile devices. The jquery code doesn't seem to work.

Can anyone help me? 

<script>
        $(document).ready(function () {
            $(window).resize(function () {
                if ($(window).width() < 800) {
                    $('video').attr('muted', 'true');
                }
            });
        });
    </script>
Sebbe77
  • 123
  • 1
  • 1
  • 5

4 Answers4

3

No need to use resize function, only document.ready is sufficient.

Also changed $.attr to $.prop and 'true' to truebecause you need to set the DOM value, not the XML attribute

    <script>
        $(document).ready(function () {

                if ($(window).width() < 800) {
                    // no jQuery needed 
                    // document.querySelector('video').muted = true;
                    $('video').prop('muted', true);
                }

        });
    </script>

Also you may look at this to check mobile/desktop instead of 800px width,

Detecting a mobile browser

Juan Mendes
  • 80,964
  • 26
  • 138
  • 189
codemirror
  • 2,266
  • 22
  • 38
  • 2
    That is, the resize won't occur on a mobile phone unless the user changes orientation – Juan Mendes Jul 20 '17 at 19:40
  • @Sebbe77 you need to check if 800 is working for you $(window).width() < 800 – codemirror Jul 20 '17 at 19:43
  • 2
    @Sebbe77 "doesn't work" is not a helpful comment. What happened? Did you step through the code? Is it ever reaching that piece of code? Any errors? Did `$('video').attr()` get called? – Juan Mendes Jul 20 '17 at 19:45
  • @Sebbe77 you need to check if this is working or not $('video').attr('muted', 'true'); – codemirror Jul 20 '17 at 19:51
  • 1
    You need to set the DOM property, not the XML attribute, `$('video').prop('muted', true)` You should still follow the advice to not rely on window size, not everybody maximizes their window. See https://stackoverflow.com/questions/41656297/html5-video-muted-attribute-not-applied-using-property-but-applied-using-setattr @codemirror – Juan Mendes Jul 20 '17 at 19:52
0

instead of detecting screen size, why not try detecting if the device has touch capabilities? 

var touchDevice = ("ontouchstart" in document.documentElement);
if(touchDevice){
  $('video').prop('muted',true);
}
Josan Iracheta
  • 3,066
  • 4
  • 23
  • 40
0
if (/Mobi/.test(navigator.userAgent)) {
    $('video').prop('muted',true);
}

OR

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $('video').prop('muted',true);
}
Codecookie1490
  • 64
  • 7
0

Simple answer

You need to do 2 things 1: Check if particular device is mobile or desktop/laptop. 2: Mute the video if it is mobile device.

make sure that you know code for both of the 2 things.

Part 1:

Let's see if it is a mobile or desktop/laptop Taken from https://stackoverflow.com/a/11381730/2664160

is a nice solution

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

mobilecheck() will return true if it is a mobile device

Part 2:

How to mute video? You have used
$('video').attr('muted', 'true'); does it work?

instead of finding solution to two problems at once, try to go step by step first make sure that you have detected if it is mobile or desktop

then try to mute video

if still unsuccessful! come back to this site :)

codemirror
  • 2,266
  • 22
  • 38