あなたのプロジェクトはちょっと面白いので、私はあなたを助けようと決めました. YouTube API を使用したことはありませんが、いくつかのコーディングを試してみました。
だからここに私が試したコードがあり、それは非常にうまく機能しているようです.
どうぞ ：
いくつかのhtmlの基本から始めましょう
<!DOCTYPE html>
<html>
<head>
フォアグラウンド プレーヤーの絶対位置を追加して、バックグラウンド ビデオを再生しているプレーヤーをオーバーレイします (テスト用)。
<style>
#player2{position:absolute;left:195px;top:100px;}
</style>
</head>
<body>
ここでは jQuery を使用してプレーヤーをフェードイン/フェードアウトします (理由は以下で説明します) が、基本的な JS を使用できます
<script src="jquery-1.10.2.min.js"></script>
< iframes> (およびビデオ プレーヤー) は、これらの < div> タグを置き換えます。
<div id="player1"></div> <!-- Background video player -->
<div id="player2"></div> <!-- Foreground video player -->
<script>
このコードは、IFrame Player API コードを非同期的に読み込みます。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
この関数は、API コードのダウンロード後に < iframes> (および YouTube プレーヤー) を作成します。コールバック関数に注意してください: onPlayer1Ready および onPlayer1StateChange
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '780',
width: '1280',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayer1Ready,
'onStateChange': onPlayer1StateChange
}
});
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayer2Ready,
'onStateChange': onPlayer2StateChange
}
});
}
var player1Ready = false;
var player2Ready = false;
ここがコードの興味深い部分です。同期プロジェクトの主な問題は、ビデオを起動する前にビデオをバッファリングする必要があるという事実に関連しています。実際には、API はビデオをプリロードするための直感的な機能を提供していません (帯域幅の問題 (クライアント側とサーバー側) のため)
。
- プレーヤーを非表示にして、次のステップがユーザーに表示されないようにします);
- プレーヤーをミュート (
player.mute():Void);
- タイムラインのジャンプをエミュレートして、バッファリングを開始します (
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void)。
- に等しい状態変更イベントを待ち
YT.PlayerState.PLAYINGます。
- ビデオを一時停止します (
player.pauseVideo():Void)。
- でビデオを巻き戻し
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Voidます。
- プレーヤーのミュートを解除します (
player.unMute():Void);
- プレーヤーを表示します。
2 つの動画をプリロードする必要があります。
var preloading1 = false;
var preloading2 = false;
動画プレーヤーの準備が整うと、API はこれらの関数を呼び出します。
function onPlayer1Ready(event)
{
player1Ready = true;
preloading1 = true; // Flag the player 1 preloading
player1.mute(); // Mute the player 1
$( "#player1" ).hide(); // Hide it
player1.seekTo(1); // Start the preloading and wait a state change event
}
function onPlayer2Ready(event) {
player2Ready = true; // The foreground video player is not preloaded here
}
バックグラウンド ビデオ プレーヤーの状態が変化すると、API はこの関数を呼び出します。
function onPlayer1StateChange(event)
{
if (event.data == YT.PlayerState.PLAYING ) {
if(preloading1)
{
prompt("Background ready"); // For testing
player1.pauseVideo(); // Pause the video
player1.seekTo(0); // Rewind
player1.unMute(); // Comment this after test
$( "#player1" ).show(); // Show the player
preloading1 = false;
player2Ready = true;
preloading2 = true; // Flag for foreground video preloading
player2.mute();
//$( "#player2" ).hide();
player2.seekTo(1); // Start buffering and wait the event
}
else
player2.playVideo(); // If not preloading link the 2 players PLAY events
}
else if (event.data == YT.PlayerState.PAUSED ) {
if(!preloading1)
player2.pauseVideo(); // If not preloading link the 2 players PAUSE events
}
else if (event.data == YT.PlayerState.BUFFERING ) {
if(!preloading1)
{
player2.pauseVideo(); // If not preloading link the 2 players BUFFERING events
}
}
else if (event.data == YT.PlayerState.CUED ) {
if(!preloading1)
player2.pauseVideo(); // If not preloading link the 2 players CUEING events
}
else if (event.data == YT.PlayerState.ENDED ) {
player2.stopVideo(); // If not preloading link the 2 players ENDING events
}
}
フォアグラウンド ビデオ プレーヤーの状態が変化すると、API はこの関数を呼び出します。
function onPlayer2StateChange(event) {
if (event.data == YT.PlayerState.PLAYING ) {
if(preloading2)
{
//prompt("Foreground ready");
player2.pauseVideo(); // Pause the video
player2.seekTo(0); // Rewind
player2.unMute(); // Unmute
preloading2 = false;
$( "#player2" ).show(50, function() {
これは、奇妙な動作をするコードの一部です。下の行のコメントを外すと、同期がかなり悪くなりますが、コメントすると、再生ボタンを2 回クリックする必要がありますが、同期の見栄えは良くなります。
//player2.playVideo();
});
}
else
player1.playVideo();
}
else if (event.data == YT.PlayerState.PAUSED ) {
if(/*!preloading1 &&*/ !preloading2)
player1.pauseVideo();
}
else if (event.data == YT.PlayerState.BUFFERING ) {
if(!preloading2)
{
player1.pauseVideo();
//player1.seekTo(... // Correct the offset here
}
}
else if (event.data == YT.PlayerState.CUED ) {
if(!preloading2)
player1.pauseVideo();
}
else if (event.data == YT.PlayerState.ENDED ) {
player1.stopVideo();
}
}
</script>
</body>
</html>
このコードではビューがカウントされない可能性があることに注意してください。
説明なしでコードが必要な場合は、ここにアクセスできます: http://jsfiddle.net/QtBlueWaffle/r8gvX/1/
2016 アップデート
ライブ プレビュー
お役に立てれば。