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

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

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

Answer 2

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

我可以想到两种解决方案：

解决方案1：更改应用的用户体验，以便在单击缩略图时可以清楚地看到视频需要再次单击才能运行，例如通过在模式内部打开视频。

解决方案2 ：（未经测试）将播放控制权交还给视频：

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

Answer 3

此代码自动播放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>

在Chrome浏览器中单击时，YouTube视频不会自动播放

3 个答案: