有点奇怪-我是第一次使用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(未启动)。
答案 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年起一直描述)描述了我遇到的问题。
希望这对发现这一点的其他人有用。