Un lecteur YouTube qui utilise deux vidéos YouTube différentes pour l'audio et la vidéo respectivement.

Question

Je veux savoir s'il est possible d'utiliser l'API (JavaScript) de YouTube pour créer dynamiquement un lecteur qui utilise deux vidéos YouTube différentes pour ses sources audio et vidéo. En d'autres termes, est-il possible, dans l'API YouTube, d'isoler l'audio d'une vidéo et la vidéo d'une autre, puis de les diffuser ensemble dans un même lecteur ?

Answer 1

Vous pouvez probablement simuler cette situation en chargeant et en lisant les deux vidéos tout en conservant la vidéo audio dans un DIV caché, et en utilisant l'API JS pour couper la vidéo audio.

Alors j'essaierais quelque chose comme ça :

 <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(); 
}

L'astuce consiste alors à donner un style à audiodiv à l'aide de CSS afin qu'il n'apparaisse pas sur la page. Vous devrez peut-être jouer avec pour trouver la meilleure combinaison, mais je pense que le fait de régler sa largeur et sa hauteur sur 0 ou 1 devrait suffire.

En outre, vous devrez peut-être configurer la fonction onYouTubePlayerReady pour vous assurer que les deux vidéos sont complètement chargées avant de lancer la lecture.