オーディオとビデオのそれぞれに2つの異なるYouTube動画を使用するyoutubeプレーヤー

Question

（javascript）Youtube APIを使用して、オーディオとビデオのソースに2つの異なるYouTube動画を使用するプレーヤーを動的に作成できるかどうかを知りたい。言い換えれば、youtube API内で、1つのビデオと別のビデオのオーディオを分離してから、1つのプレーヤ内で一緒にストリームすることは可能ですか？

Answer 1

オーディオのみのビデオを非表示のDIVに保存し、JS APIを使用してビデオのみのビデオをミュートしながら、両方のビデオを読み込んで再生することで、おそらく偽装することができます。

だから私はこのような何かをしようとするだろう：

は

<script type="text/javascript" src="swfobject.js"></script>  
<div id="videodiv"> 
The muted video will go here 
</div> 
<div id="audiodiv"> 
the hidden video will go here 
</div> 

<script type="text/javascript"> 
var audioplayer; 
var videoplayer; 

var params = { allowScriptAccess: "always" }; 
var video_atts = { id: "vidonly" }; 
var audio_atts = { id: "audonly" }; 

// embed the video-only player 
swfobject.embedSWF("http://www.youtube.com/e/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer", 
        "videodiv", "425", "356", "8", null, null, params, atts); 

// embed the audio-only player 
swfobject.embedSWF("http://www.youtube.com/e/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer", 
        "audiodiv", "425", "356", "8", null, null, params, atts); 


function onYouTubePlayerReady(playerId) { 
    audioplayer = document.getElementById("myytplayer"); 
    videoplayer = document.getElementById("myytplayer"); 

    videoplayer.mute(); 

    audioplayer.play(); 
    videoplayer.play(); 
} 

トリックは、それがページに表示されないようにCSSでスタイルaudiodivすることです。最高のコンビネーションを見つけるためにそれを使いこなす必要があるかもしれませんが、その幅と高さを0または1に設定すれば十分だと思います。

また、再生を開始する前に両方の動画が完全に読み込まれていることを確認するには、onYouTubePlayerReady関数を設定する必要があります。