YouTube Iframe API - 视频有时无法通过自定义控件播放，而是刷新视频
YouTube Iframe API - video will sometimes not play via custom controls and instead, it refreshes the video
有点奇怪 - 我第一次使用 YouTube iFrame API，为客户站点构建皮肤。
我遵循了 Google/YouTube (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API) 提供的代码示例。
问题是，当单击调用 player.playVideo() 的播放按钮时，在某些情况下它会播放，但大多数情况下，它似乎只是刷新视频，控制台中没有记录任何错误。视频将逐渐变黑，就好像它即将播放一样，但它会随着播放按钮逐渐变回视频 "poster"。
您可以在此处查看完整代码 - https://codepen.io/james-morton/pen/BEZGvm
我尝试了各种不同的方法，例如不使用：
function onYouTubePlayerAPIReady() {
..我按照其他示例尝试过此操作但无济于事
window.onYouTubePlayerAPIReady = function() {
再次声明，控件有时有效，有时无效 - 同一台机器，相同的浏览器，相同的视频 - 我已经尝试过其他视频和相同的结果。它确实不一致，因为它有时会起作用。
有什么想法吗？
编辑：
使用以下进一步调试后：
function onPlayerStateChange(event){
console.log('State Change: ' + event.data);
}
我可以看到，当它没有加载时，播放器的状态已经从 -1（未启动）变为 3（缓冲），然后在单击播放按钮时变回 -1（未启动）。
这很奇怪！我不太 'solve' 它但我有一些反馈。在 运行 你的代码上，起初我根本无法播放它（通过中间的 'YT' 播放按钮或自定义播放按钮），但是当我使用你的 'ff'按钮（还没有开始播放时），有明显的启动迹象。我将 yt-player 中的 z-index 从 2 更改为 -2，然后可以使用中间按钮开始播放。初始播放后，我使用自定义按钮没有问题（pause/play 工作正常）- 我刷新并尝试了多次，每次都成功。
一个大问题是使用自定义播放按钮开始第一个视频播放。你也许可以自动启动它（也许有延迟？）来避免必须使用中间按钮？我确实检查了按钮的宽度（以查看是否可能填充/重叠）可能会影响播放按钮但没有发现任何东西。我确实注意到，当我播放视频时它从初始位置略微上升，所以我稍微调整了 css （只是非常轻微的调整）。这是我的 codepen link（它和你的没什么不同..）我希望这有帮助.. 如果有一点的话。
事实证明问题似乎出在 CodePen 上 - 将所有代码转移到我自己的环境后，它可以完美运行，通过控件没有播放问题。
查看 https://css-tricks.com/play-button-youtube-and-vimeo-api/ 使用非常相似的设置后，问题很容易在 CodePen 上重现，评论（从 2014 年开始）描述了我遇到的问题。
希望这对发现此问题的其他人有用。
有点奇怪 - 我第一次使用 YouTube iFrame API，为客户站点构建皮肤。
我遵循了 Google/YouTube (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API) 提供的代码示例。
问题是，当单击调用 player.playVideo() 的播放按钮时，在某些情况下它会播放，但大多数情况下，它似乎只是刷新视频，控制台中没有记录任何错误。视频将逐渐变黑，就好像它即将播放一样，但它会随着播放按钮逐渐变回视频 "poster"。
您可以在此处查看完整代码 - https://codepen.io/james-morton/pen/BEZGvm
我尝试了各种不同的方法，例如不使用：
function onYouTubePlayerAPIReady() {
..我按照其他示例尝试过此操作但无济于事
window.onYouTubePlayerAPIReady = function() {
再次声明，控件有时有效，有时无效 - 同一台机器，相同的浏览器，相同的视频 - 我已经尝试过其他视频和相同的结果。它确实不一致，因为它有时会起作用。
有什么想法吗？
编辑：
使用以下进一步调试后：
function onPlayerStateChange(event){
console.log('State Change: ' + event.data);
}
我可以看到，当它没有加载时，播放器的状态已经从 -1（未启动）变为 3（缓冲），然后在单击播放按钮时变回 -1（未启动）。
这很奇怪！我不太 'solve' 它但我有一些反馈。在 运行 你的代码上，起初我根本无法播放它（通过中间的 'YT' 播放按钮或自定义播放按钮），但是当我使用你的 'ff'按钮（还没有开始播放时），有明显的启动迹象。我将 yt-player 中的 z-index 从 2 更改为 -2，然后可以使用中间按钮开始播放。初始播放后，我使用自定义按钮没有问题（pause/play 工作正常）- 我刷新并尝试了多次，每次都成功。
一个大问题是使用自定义播放按钮开始第一个视频播放。你也许可以自动启动它（也许有延迟？）来避免必须使用中间按钮？我确实检查了按钮的宽度（以查看是否可能填充/重叠）可能会影响播放按钮但没有发现任何东西。我确实注意到，当我播放视频时它从初始位置略微上升，所以我稍微调整了 css （只是非常轻微的调整）。这是我的 codepen link（它和你的没什么不同..）我希望这有帮助.. 如果有一点的话。
事实证明问题似乎出在 CodePen 上 - 将所有代码转移到我自己的环境后，它可以完美运行，通过控件没有播放问题。
查看 https://css-tricks.com/play-button-youtube-and-vimeo-api/ 使用非常相似的设置后，问题很容易在 CodePen 上重现，评论（从 2014 年开始）描述了我遇到的问题。
希望这对发现此问题的其他人有用。