帮助两个选择框更改同一视频

我希望能够有两个选择框，每个都有不同的选项，将视频加载到同一播放器中。我试过很多变体，但都不走运。(摘自Google代码)

<!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>

嗯，看到了几个"bug "。试试这个:

<select id="videoSelection"  onchange="loadVideo(this);">

和

<select id="videoSelection2"  onchange="loadVideo(this);">

function loadVideo(el) {
    if(!ytplayer)return;
    ytplayer.loadVideoById(el.options[el.selectedIndex].value);
}

相关内容

最新更新

热门标签：