Question

我有一个视频标签，需要在桌面上使用属性循环和自动播放，只需要控制和移动设备上的海报属性（大约767像素）。如何根据设备宽度让视频具有特定属性？我希望它因设备而异，因为许多移动设备对autoplay属性反应不佳。这里有一些代码可以更好地说明我想要做的事情：

＆＃13;

//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');


  }
});

＆＃13;

<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>

＆＃13;

我该如何做到这一点（我已经尝试过上面的代码，然后是一些而且我无法获得任何工作）？最好不要在HTML中指定任何代码，只需在javascript中设置它或根据上下文删除它。谢谢。

P.S。我宁愿不使用媒体查询...

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>

根据设备宽度更改视频标记属性（JQuery / Javascript）

1 个答案: