“隐藏” YouTube 视频的加载屏幕答案

【问题标题】："Hide" a YouTube Video's Loading screen“隐藏” YouTube 视频的加载屏幕
【发布时间】：2015-06-27 14:43:03
【问题描述】：

在查看了YouTube IFrame API 之后，我找不到任何可以帮助我的东西。

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

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

是否还有其他方法可以解决这个问题，或者我是否停留在简短的加载屏幕上，或者自托管视频会是更好的方法吗？由于带宽问题，我想避免自行托管视频。

【问题讨论】：

最大的障碍是 iframe。你基本上不能触摸 iframe 内的任何东西。我能想出的唯一条条框框的想法是观察像素的颜色是否从黑色变为黑色。在 iframe 中读取任何值时，您仍然会遇到问题。
当视频被提示（因此准备好播放）时，您不能听onStateChange 吗？在此之前，您可以隐藏视频，或通过用空白元素（或视频中的静止图像）覆盖它来隐藏它，然后在提示视频时移除覆盖。
@Terry，我的错，我打错了。我正在听 onStateChange 事件。如果我理解正确，提示状态仅适用于播放列表等，因为它没有显示在 onStateChange 事件中。
@allejo 你能做到吗？如果是，请告诉我。

标签： javascript jquery html youtube-api

【解决方案1】：

托管视频并尽可能使用 API；自定义媒体播放器、隐藏/显示/自定义加载屏幕、提示点、开始海报/结束海报等。否则您将花时间用 funky 破解 youtube API 功能javascript。

JW玩家：http://www.jwplayer.com/

流播放器：https://flowplayer.org/docs/cuepoints.html

还有很多其他的你可以看看。

video.js、popcorn.js等

【讨论】：

【解决方案2】：

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

【讨论】：

太棒了。我在这里扔了一个 CSS 过渡，它看起来很棒。
你是怎么做到的......你是如何检测到 iframe 开始播放的？
youtube播放器开火事件，您可以在这里查看更多详细信息developers.google.com/youtube/iframe_api_reference#Events

【解决方案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";
}

【讨论】：