0

I have a very simple html page that hosts only a video. The controls attribute is absent and autoplay is present. This prevents the movie from playing on mobile (autoplay is banned and it cannot be started without controls).

<video class="center" width="1280" height="720" loop autoplay="autoplay" ondblclick="makeFullScreen(this)" >

Is there a way using either an attribute or some javascript to have different attribute for mobile and desktop, for example by using the media attribute and a restriction on the screen size? A PHP solution serving different pages would also be acceptable, but second best.

Three Diag
  • 515
  • 1
  • 7
  • 17

1 Answers1

0

there are loads of JavaScript functions out there to detect if the client device is mobile or desktop. You can choose any such function (What is the best way to detect a mobile device in jQuery?) afterwards you make a simple if stmnt (if the device is mobile add control attribute) Alternatively as you mentioned you can detect this with php and make a similar if stmnt

Ibber Chochem
  • 185
  • 8
  • I can do the if part, not sure how to go about "adding" the control attribute, could you demonstrate? – Three Diag Feb 03 '18 at 22:28
  • i did it with jquery. i believe this would be the code. (obliviously you would put this in an if statement $('#elementId').attr('controls','on'); – Ibber Chochem Feb 04 '18 at 12:11