嵌入的YouTube视频不会重播 [英] Embedded YouTube videos won't replay
问题描述
奇怪的是：嵌入的YouTube视频一旦播放（通过点击播放或页面加载自动播放）将无法再播放。 我使用标准iFrame嵌入从YouTube直接复制。这发生在几个不同的短视频以及我测试过的所有浏览器/操作系统组合（Windows / Mac上的Chrome / Safari / Firefox / IE）上。
：
< iframe width =420height =315src =// www.youtube.com/embed / OuSdU8tbcHYframeborder =0allowfullscreen>< / iframe>
，你可以在 this faddle 。 所以看来问题是与视频长度无关;这是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;
函数onYouTubeIframeAPIReady（）{
player = new YT.Player（'player'，{
events：{
onStateChange：'onPlayerStateChange'
}
}）;
}
函数onPlayerStateChange（event）{
if（event.data === YT.PlayerState.ENDED）{
event.target.cueVideoById（event。 target.getVideoData（）VIDEO_ID）。
}
}
< / script>
< iframe width =420height =315src =// www.youtube.com/embed/OuSdU8tbcHYframeborder =0allowfullscreen id =player>< / iframe>
< / body>
< / html>
请注意，这需要为iframe提供一个id属性，以便您可以使用iframe API。这也避免了在视频上覆盖任何DOM元素（只要你没有任何奇怪的wmode需求，这绝不是一个坏的解决方案;对YouTube TOS的非常严格的阅读也可能导致这样的结论：即使播放器透明，也不能在播放器的任何部分上覆盖任何东西......）。
我的解决方案的一个缺点是它不会在视频的末尾显示相关视频，所以如果这是一个交易断路器，那么这是一个不（换句话说，我的解决方案更类似于将rel = 0属性添加到iframe源文件中）。
Strange one: embedded YouTube videos, once played (either by clicking 'play' or autoplaying on page load) will not play again.
I'm using the standard iFrame embed copied straight from YouTube. This happens with several different short videos and across all browser/OS combinations I've tested (Chrome/Safari/Firefox/IE on Windows/Mac).
Here's the code:
<iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen></iframe>
and you can see it in action at this fiddle.
So it appears that the issue is NOT related to video length; it's a problem with the flash player. If the flash player is loaded, and there is no user interaction with the controls at all, then when the player finishes it will not reload the iframe (despite the fact that it raises the 'video ended' event ... when you try to reload it won't issue the right call to reload the video and hence can never restart playback). You can test longer videos as well; if you start watching them and don't use the scrub bar, they'll exhibit the same behavior. Likewise, on your very short video, if you start playback and then scrub a bit (even backwards in time), that will trigger an iframe reload (akin to what @SuperMan noted), and so when the video finishes, then the reload will work just fine.
This is most likely a recently introduced bug in the Flash player, and it is not present in the HTML5 player; so if your use case allows it, the simplest solution would be to force the HTML5 player by appending ?html5=1 to the source of your iframe.
However, if having the flash player as a possibility is an iron clad requirement, then you can hack your code to force it to reload itself when finished (rather than waiting for a user to hit the reload or replay button).
<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>
Note that this requires giving your iframe an id attribute, so that you can bind to it with the iframe API.
This also avoids having to overlay any DOM elements over the video (which is not in any way a bad solution as long as you don't have any odd wmode requirements; a very strict reading of the YouTube TOS might also lead to the conclusion that you can't overlay anything over any portion of the player even if it's transparent...).
One drawback of my solution is that it won't display the 'related videos' at the end of the video, so if that's a deal breaker then this is a no-go (in other words, my solution is more akin to adding the rel=0 attribute to your iframe source).
这篇关于嵌入的YouTube视频不会重播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
