Question

我在页面上使用视频作为横幅。我希望由于数据问题而在有人使用手机时停止播放。尝试使用jquery检查窗口大小，并在窗口宽度小于600px时停止。问题是，有时视频会在PC上开始自动播放，但是如果刷新页面，它将停止。我正在使用js + jquery，尝试在右正文标签上方以及标头中添加。我在某处读到，浏览器阻止了在手机上自动播放，但不确定是否正确。我也很高兴听到一些关于它的答案。这是我的代码：

<video class="video" id="video" loop="loop" muted="muted" preload="auto">
<source src="https://www.lacity.org/sites/g/files/wph1221/f/EchoPark_1920x800_loop.mp4" type="video/mp4">
Böngészője nem támogatja a  a HTML5 videót</video>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$(function() {
  var screenWidth = $(window).width();
  if (screenWidth >= 600) {
    $('#video').attr('autoplay', 'autoplay');
  }
});
</script>

Answer 1

Please try this code i hope help you.

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$(function() {
  var screenWidth = $(window).width();
  if (screenWidth >= 600) {
    $('#video').play();
  }
});
</script>

Answer 2

var gridData = function() {
    $.ajax({
        async: false,
        url: "/your-api-url",
        dataType: 'json',
        type: 'GET',
        success: function(data){
            console.log(data);
            gridData = data;
        }
    });
    return gridData;
}();

这将是检测用户设备的最佳方法，希望对您有帮助

视频自动播放有时有效，有时无效

2 个答案: