javascript - 我正在加载图像而不是 iframe 并使用 jquery 在同一位置播放视频的图像上单击。适用于桌面设备但不适用于移动设备？

Question

由于页面加载时间问题，我正在加载图像而不是 iframe-video 并在该图像上使用 jquery 在同一位置播放视频。在桌面上工作正常，但在移动设备上不行？

我想在使用 jquery 单击图像后用自动播放 iframe-video 替换图像。我做到了，在桌面上工作得很好，但在移动设备上图像被 iframe 视频取代..但 iframe 视频不执行自动播放？这发生在台式机中..

我的代码 fragment :

HTML:

<div class="laptop-wrapper" id="lptop_vdo" style="display: none;">              
</div>

<div class="laptop-wrapper" id="lptop_img">
      <img class="img-responsive" src="<?php echo BASE_IMAGE; ?>iframeVdo.jpg">            
</div>

Jquery:

<script>
    $(document).ready(function() {
      $('#lptop_img').on('click', function(ev) {

          $('#lptop_img').hide();
          $('#lptop_vdo').show();
          $('#lptop_vdo').html('<iframe id="blz_main_vdo" width="560" height="315" src="https://www.youtube.com/embed/QQDVzP__Xhs?rel=0&amp;showinfo=0&amp;autoplay=1" allow="autoplay; encrypted-media" frameborder="0" allowfullscreen data-play="1"></iframe>');
          ev.preventDefault();

      });
    });
</script>

为什么 iframe 自动播放无法在移动设备上运行(我正在尝试使用 jquery，用 iframe 自动播放替换图像。但是替换后自动播放不仅仅适用于移动设备？)

请给我一些想法。因为在我的网站页面上有更多视频..

Answer 1

您无法在所有移动设备上进行自动播放...某些设备会阻止自动播放，例如 iOS...

这个 stackoverflow 上有很多这样的问题..你可以像 Autoplay audio files on an iPad with HTML5 那样检查它们。 , Youtube autoplay not working on mobile devices with embedded HTML5 player和 Youtube embedded video: autoplay feature not working in iphone