"Hide" YouTube 视频的加载屏幕

Question

在浏览 YouTube IFrame API 之后，我没能找到任何可以帮助我的东西。

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

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

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

Answer 1

主持视频并尽可能使用 API；自定义媒体播放器、隐藏/显示/自定义加载屏幕、提示点、开始海报/结束海报等。否则你会浪费时间使用时髦 javascript.

破解 youtube API 功能

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

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

还有许多您可以查看的其他内容。

video.js, popcorn.js,等等等等

Answer 2

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

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)， // 玩家应该玩六秒然后停止。

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

"Hide" YouTube 视频的加载屏幕

"Hide" a YouTube Video's Loading screen

html

javascript

jquery

youtube-api