A YouTube player that uses 2 different YouTube videos for audio and video respectively
I want to know if it is possible to use the (JavaScript) YouTube API to dynamically create a player that uses two different YouTube videos for its audio and video sources. In other words, is it possible within th开发者_Go百科e YouTube API to isolate audio of one video and video of another and then stream them together within one player?
you could probably fake it by loading and playing both videos while keeping the audio-only video in a hidden DIV, and using the JS API to mute the video-only video.
So I would try something like this:
<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();
}
The trick then is to style audiodiv with CSS so that it doesn't appear on the page. You may need to play around with it to find the best combination, but I'm guessing that setting its width and height to 0 or 1 should be enough.
Also, you may need to set up the onYouTubePlayerReady function to make sure that both videos are completely loaded before you start playback.
精彩评论