＆＃34;隐藏＆＃34; YouTube视频的加载屏幕

Question

查看YouTube IFrame API后，我找不到任何可以帮助我的内容。

我的目标是“隐藏”YouTube视频的加载屏幕;即这个带有旋转轮的黑色屏幕。虽然它只是短暂出现并且不会打扰我，但在尝试使用YouTube作为元素的背景时会很麻烦。

我解决此问题的方法是让YouTube视频的第一帧与视频重叠，然后在视频开始播放时隐藏它。我原本以为我可以使用onStateChange并注意YT.PlayerState.PLAYING值，这样我就可以隐藏图像，但是当它即将开始播放时会触发此事件;换句话说，它会在视频即将开始播放时隐藏图像，即加载屏幕出现时。

有没有其他方法可以解决这个问题，还是我坚持使用简短的加载屏幕，或者自托管视频是否更好？我想避免因带宽而自行托管视频。

Answer 1

将iframe容器的背景设置为黑色，并将iframe不透明度设置为0，一旦开始播放，将不透明度设置为1

Answer 2

主持视频并尽可能使用API​​;自定义媒体播放器，隐藏/显示/自定义加载屏幕，提示点，开始海报/结束海报等等。或者您花时间利用时髦来破解youtube API功能的JavaScript。

JW球员：http://www.jwplayer.com/

Flow Player：https://flowplayer.org/docs/cuepoints.html

还有很多其他人可以查看。

video.js，popcorn.js 等等。

Answer 3

<div id="player" style="background: #FFFFFF; opacity: 0;"></div>

// 2. This code loads the IFrame Player API code asynchronously.

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

// 4. The API will call this function when the video player is ready.

// 5.当玩家的状态发生变化时，API会调用此函数。    //该函数表示播放视频时（state = 1），    //玩家应该玩6秒然后停止。

if (event.data === 1) {
    console.log('video plays');
    document.getElementById("player").style.opacity = "1";
}