Question

我最近有一个YouTube视频播放脚本，我一直在编辑它以增强我的jquery能力（我是初学者）。我刚刚开始注意到如何在不刷新的情况下进行更新。无论如何，这个视频播放脚本给了我一个右侧可供选择的视频列表，它将播放视频。但是，我试图将它转到哪里，如果你点击侧面的视频，它将突出显示点击的视频缩略图的div，并将突出显示的div更改为下一个点击的任何一个。这是我的代码

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</head>

<body>
<div id="main" style="width: 1000; height: 440px; margin: 0 auto; margin-top: 100px;">
    <?php $youtube=s implexml_load_file( 'http://gdata.youtube.com/feeds/api/videos?alt=rss&orderby=published&author=1v1lb'); $first=$ youtube->channel->item[0]; ?>
    <!-- Playlist with thumbnails -->
    <div class="rightcontent">
        <div id="videoheader"><span style="color: #FFFFFF;">Uploads From 1v1LB</span>
        </div>
        <div class="scrollbar" id="simple">
            <ul id="videolist" style="list-style-type: none; padding: 0; margin: 0;  background: #1B1B1B;">
                <?php foreach ($youtube->channel->item as $item) { ?>
                <li style="cursor:pointer;">
                    <div id="video" onclick="play('<?php echo basename($item->guid); ?>');$(this).css({ backgroundColor: " red " });">
                        <img src="<?php echo $item->children('media', true)->group->children('media',true)->thumbnail->attributes()->url; ?>" style="vertical-align: middle" width="75" height="50">
                        <?php echo basename($item->title); ?>
                    </div>
                </li>

                <?php } ?>
            </ul>
        </div>
    </div>
    <!-- Video Player Box -->
    <div id="ytapiplayer" style="width: 620px; height: 480px;">
        You need Flash player 8+ and JavaScript enabled to view this video.
    </div>

</div>

<script type="text/javascript">
    var params = {
        allowScriptAccess: "always",
        allowfullscreen: "true"
    };
    var atts = {
        id: "myytplayer"
    };

    swfobject.embedSWF("http://www.youtube.com/e/<?php echo basename($first->guid); ?>?enablejsapi=1&playerapiid=ytplayer?rel=0&autoplay=1",
        "ytapiplayer", "640", "480", "8", null, null, params, atts);

    function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("myytplayer");
    }

    function play(videoid) {
        if (ytplayer) {
            ytplayer.loadVideoById(videoid);
        }
    }
</script>
</body>

</html>

在我尝试执行此操作之前，代码运行良好。混乱的部分是：

<div id="video" onclick="play('<?php echo basename($item->guid); ?>');$(this).css({ backgroundColor: " red " });">

出于某种原因，一旦我添加了第二个onclick功能，它就会把整个事情搞得一团糟，甚至不能点击视频了。有人可以帮忙吗？

Answer 1

<div id="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">

function play(el, videoid) {
  if (ytplayer) {
      ytplayer.loadVideoById(videoid);
  }

  $(el).css('background-color', 'red');
}

更新：

<!-- list with videos -->
<div class="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">
<div class="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">
<div class="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">

function play(el, videoid) {
  if (ytplayer) {
      ytplayer.loadVideoById(videoid);
  }

  // reset background-color for all divs which has class video
  $('.video').css('background-color', '');

  // set background for current element
  $(el).css('background-color', 'red');
}

选中后更新div背景颜色

1 个答案: