javascript - 根据设备宽度更改视频标签属性(JQuery/Javascript)

Question

我有一个视频标签，需要在桌面上具有循环和自动播放属性，而在移动设备上仅具有控件和海报属性(大约 767 像素)。如何让视频根据设备宽度具有特定属性？我希望它根据设备的不同而有所不同，因为许多移动设备对自动播放属性的响应不佳。下面是一些代码，可以更好地说明我想要做什么:

//Here, I would like to do something like this:

document.addEventListener("DOMContentLoaded", function(event) {
  //for mobile
  if ($(window).width() < 767) {

    var video = $('#video').get(0);

    $('#video').removeAttr('autoplay');
    $('#video').removeAttr('loop');
    //either that or set attributes here like this:
    //$('#video').attr('controls', 'controls');
    //$('#video').attr('poster', 'poster');


  }
  // Desktops/tablets
  else if ($(window).width() > 767) {
    $('#video').attr('autoplay', 'autoplay');
    $('#video').attr('loop', 'loop');


  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video id="video" autoplay="autoplay" loop="loop" poster="images/video.jpg">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <img src="images/video.jpg" height="500" style="width: 100%;" />
</video>

我该如何做到这一点(我已经尝试了上面的代码，然后有些代码我无法让任何东西工作)？另外，最好不要在 HTML 中指定任何代码，而只是在 javascript 中设置它，或者根据上下文删除它。谢谢。

附注我宁愿不使用媒体查询...

Answer 1

我可以通过在 HTML 中手动添加所有控件并根据设备类型简单地删除所需的控件来解决此问题。这是一些代码:

function load() {
            var video = document.getElementsByTagName('video')[0];

             if (navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
        ) {
               //This is if the device is mobile
                video.removeAttribute('autoplay');
                video.removeAttribute('loop');
            }
            else {
                //anything other than mobile (i.e. Desktop)
                video.removeAttribute('controls');
            }

        }

  <video controls="controls" autoplay="autoplay" loop="loop" poster="images/video.jpg" onloadstart="load()">
        <source src="images/video.mp4" type="video/mp4" />      
        <source src="images/video.webm" type="video/webm" />
        <p>Hello!?!?!?</p>
        <img src="images/video.jpg" />
    </video>