YouTube Iframe API-有时无法通过自定义控件播放视频,而是刷新视频

时间:2019-04-22 21:30:19

标签: javascript youtube-iframe-api

有点奇怪-我是第一次使用YouTube iFrame API,为客户网站构建外观。

我遵循了Google / YouTube(https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API)提供的代码示例。

问题在于,单击播放按钮(调用player.playVideo())时,在某些情况下它将播放,但大多数情况下,它只是刷新视频而在控制台中未记录任何错误。视频将像将要播放一样淡出黑色,但使用播放按钮淡出回到视频“海报”。

您可以在此处查看整个代码-https://codepen.io/james-morton/pen/BEZGvm

我尝试了各种不同的操作,例如不使用:

function onYouTubePlayerAPIReady() {

..我尝试了其他示例,但无济于事

window.onYouTubePlayerAPIReady = function() {

再次,要清楚,控件有时可以起作用,有时却不能起作用-同一台机器,同一浏览器,同一视频-我试过其他视频和相同结果。有时候确实会不一致。

有什么想法吗?

编辑:

使用以下代码进一步调试后:

function onPlayerStateChange(event){
  console.log('State Change: ' + event.data);
}

我可以看到,当它不加载时,播放器的状态从-1(未启动)更改为3(缓冲),然后在单击播放按钮时又回到-1(未启动)。

2 个答案:

答案 0 :(得分:0)

这是一个奇怪的!我没有完全“解决”它,但有一些反馈。在运行代码时,起初我根本无法播放(通过中间的“ YT”播放按钮或通过自定义播放按钮),但是当我使用您的“ ff”按钮时(当它没有尚未开始播放),有明显迹象表明它已被激活。我将z-index中的yt-player从2更改为-2,然后可以使用中间按钮开始播放。初始播放后,使用自定义按钮就没问题(暂停/播放效果很好)-我多次刷新并尝试了一次,每次都成功。

一个大问题是使用自定义播放按钮开始第一个视频播放。您可能会自动启动它(也许会有延迟?)来规避使用中间按钮的麻烦?我确实检查了按钮的宽度(看是否填充/重叠)可能会影响播放按钮,但没有发现任何问题。我确实注意到,当我播放视频时,它比初始位置略有上升,因此我对CSS进行了一些微调(只是非常微调)。这是我的codepen link(与您的没什么不同。)我希望这对您有所帮助。

答案 1 :(得分:0)

事实证明,问题似乎出在CodePen上-已将所有代码都转移到我自己的环境中,它可以完美地工作,并且没有通过控件的播放问题。

https://css-tricks.com/play-button-youtube-and-vimeo-api/的使用非常相似的设置进行了审查,该问题很容易在CodePen上复制,并且注释(从2014年起一直描述)描述了我遇到的问题。

希望这对发现这一点的其他人有用。