奇怪的是:嵌入的 YouTube 视频一旦播放(通过点击“播放”或在页面加载时自动播放)将不会再次播放。
我使用的是直接从 YouTube 复制的标准 iFrame 嵌入。几个不同的短视频以及我测试过的所有浏览器/操作系统组合(Windows/Mac 上的 Chrome/Safari/Firefox/IE)都会出现这种情况。
代码如下:
<iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen></iframe>
您可以在 this fiddle 看到它的运行情况.
最佳答案
看来问题与视频长度无关；是flash播放器的问题。如果加载了 Flash 播放器，并且根本没有用户与控件进行交互，那么当播放器完成时，它不会重新加载 iframe(尽管它会引发“视频结束”事件......当您尝试重新加载它不会发出正确的调用来重新加载视频，因此永远无法重新开始播放)。您也可以测试更长的视频；如果您开始观看它们并且不使用滑动条，它们将表现出相同的行为。同样，在您的非常短的视频中，如果您开始播放然后滑动一点(甚至在时间上倒退)，这将触发 iframe 重新加载(类似于@SuperMan 指出的)，因此当视频结束时，重新加载将工作得很好。
这很可能是最近在 Flash 播放器中引入的错误，而在 HTML5 播放器中不存在；因此，如果您的用例允许，最简单的解决方案是通过将 ?html5=1 附加到 iframe 的源来强制 HTML5 播放器。
但是，如果将 Flash 播放器作为一种可能性是一个铁定的要求，那么您可以破解您的代码以强制它在完成后重新加载自己(而不是等待用户点击重新加载或重播按钮)。
<html>
<body>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
onStateChange: 'onPlayerStateChange'
}
});
}
function onPlayerStateChange(event) {
if (event.data===YT.PlayerState.ENDED) {
event.target.cueVideoById(event.target.getVideoData().video_id);
}
}
</script>
<iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen id="player"></iframe>
</body>
</html>
请注意，这需要为您的 iframe 提供一个 id 属性，以便您可以使用 iframe API 绑定(bind)到它。
这也避免了在视频上覆盖任何 DOM 元素(只要您没有任何奇怪的 wmode 要求，这无论如何都不是一个糟糕的解决方案；非常严格地阅读 YouTube TOS 也可能会导致结论是你不能在播放器的任何部分覆盖任何东西，即使它是透明的......)。
我的解决方案的一个缺点是它不会在视频末尾显示“相关视频”，因此如果这是一个交易破坏者，那么这是不行的(换句话说，我的解决方案更类似于将 rel=0 属性添加到您的 iframe 源)。
关于javascript - 嵌入的 YouTube 视频不会重播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21002721/