javascript - 分别使用 2 个不同的 YouTube 视频作为音频和视频的 YouTube 播放器

Question

我想知道是否可以使用 (JavaScript) YouTube API 动态创建一个使用两个不同的 YouTube 视频作为其音频和视频源的播放器。换句话说，是否可以在 YouTube API 中隔离一个视频的音频和另一个视频的音频，然后在一个播放器中将它们一起流式传输？

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 函数以确保在开始播放之前两个视频都已完全加载。