帮助让两个选择框更改同一视频
我希望能够有两个选择框，每个框都有不同的选项，将视频加载到同一个播放器中。我尝试了很多变体但没有运气。 （取自谷歌代码）
<!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].value
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>
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].value
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
嗯，看到了一些“错误”。试试这个：
HTML
和
JS
Hmz, saw a couple of "bugs". Try this:
HTML
and
JS