在 chrome 中点击时 youtube 视频不会自动播放

Question

我得到了这段代码，可以在点击图像时以动态方式嵌入 YouTube 视频，它工作正常，但在点击时不会自动播放。

它在 mozilla 中工作正常但在 chrome 中不工作。

我在网页中放置图像（视频缩略图）而不是视频 iframe 以减少页面负载，当单击这些缩略图时我正在通过 jquery 动态加载 iframe 一切正常但加载的视频不是自动播放，而是提供另一个按钮来播放 youtube 视频。

我希望在 chrome 中单击时自动播放。请帮忙

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>

<html>
<head>
 <title>YouToubes replace example</title>
 <script src="jquery-1.11.2.min.js"></script>
 <style>
  p {margin-bottom:2em;}
  iframe,.ytLoader {display:block;margin:0 auto;width:50vw;height:37.5vw;border:0.5vw solid #ccc;}
  .ytLoader {position:relative;cursor:pointer;overflow:hidden;}
  .ytLoader>.cover {width:100%;height:auto;}
  .ytLoader>.playBtn {position:absolute;top:50%;left:50%;width:20%;height:auto;transform:translate(-50%,-50%);opacity:0.5;}
 </style>
 <script>
  function youTubes_makeDynamic() {
   var $ytIframes = $('iframe[src*="youtube.com"]');
   $ytIframes.each(function (i,e) {
    var $ytFrame = $(e);
    var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
    var $ytLoader = $('<div class="ytLoader">');
    $ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
    $ytLoader.append($('<img class="playBtn" src="play_button.png">'));
    $ytLoader.data('$ytFrame',$ytFrame);
    $ytFrame.replaceWith($ytLoader);
    $ytLoader.click(function () {
     var $ytFrame = $ytLoader.data('$ytFrame');
     $ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
     $ytLoader.replaceWith($ytFrame);
    });
   });
  };
  $(document).ready(function () {youTubes_makeDynamic()});
 </script>
</head>

<body>

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>


</body>

</html>

Answer 1

此代码自动播放 youtube 视频

你的代码问题是 javascript 代码和嵌入式 youtube url 代码。

你可以试试这个::

<!DOCTYPE html>

<html>
<head>

    <title>YouToubes replace example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!--<script src="jquery-1.11.2.min.js"></script>-->
    <style>
        p {
            margin-bottom: 2em;
        }

     
    </style>
  
</head>

<body>

    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
   

</body>

</html>

Answer 2

从版本 62 开始，这是 Chrome 中的一项功能 - 避免在您打开页面时向您发出烦人的广告 (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)。

它将不会自动播放，除非用户为站点激活它； Chrome 现在已经内置了。
您可以在设置中为自己的安装更改它。

Answer 3

根据@Narendra 的评论，Chrome 正在阻止自动播放，因此您不能依赖自动播放来假装您对用户的点击做出反应。

我能想到的解决方案有2种：

解决方案 1:change 您的应用程序的用户体验，以便在单击缩略图时，很明显视频需要再次单击才能运行，例如通过在模式中打开它。

方案二：（未测试）将播放控制权交还给视频：

您显示快速加载的缩略图
您无需等待用户点击即可加载视频。为了保持快速加载，您可以等待空闲来创建底层 iframe https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
将鼠标悬停在缩略图上时，您隐藏了缩略图，显示了下面的视频。单击时，它应该会播放。

在 chrome 中点击时 youtube 视频不会自动播放

youtube video doesnt autoplay while clicked in chrome

javascript

youtube