Help getting two select boxes to change the same video
I want to be able to have two select boxes, each with different options, to load videos into the same player. I have tried many variations with no luck. (taken from google code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>YouTube Player API Sample</title>
<style type="text/css">
#videoDiv {
margin-right: 3px;
}
#videoInfo {
margin-left: 3px;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
// Loads the selected video into the player.
function loadVideo() {
var selectBox = document.getElementById("videoSelection", "videoselection2");
var videoID = selectBox.options[selectBox.selectedIndex].va开发者_StackOverflowlue
if(ytplayer) {
ytplayer.loadVideoById(videoID);
}
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onError", "onPlayerError");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "ylLzyHk54Z0"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1",
"videoDiv", "480", "295", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="videoDiv">Loading...</div>
<div id="videoControls">
<p>Select a video to load:</p>
<select id="videoSelection" onchange="loadVideo();">
<option value="ylLzyHk54Z0" selected>YouTube API Overview</option>
<option value="muLIPWjks_M">Ninja Cat</option>
<option value="GMUlhuTkM3w">Beatboxing Flute</option>
</select>
<select id="videoSelection2" onchange="loadVideo();">
<option value="S8V1olWt8I0" selected>AAA</option>
<option value="FK_hftXn4dk">BBB</option>
<option value="R94UjwGK8mw">CCC</option>
</select>
</div>
</body>
</html>
Hmz, saw a couple of "bugs". Try this:
HTML
<select id="videoSelection" onchange="loadVideo(this);">
and
<select id="videoSelection2" onchange="loadVideo(this);">
JS
function loadVideo(el) {
if(!ytplayer)return;
ytplayer.loadVideoById(el.options[el.selectedIndex].value);
}
加载中,请稍侯......
精彩评论