2014-11-15 2 views
1

Недавно я получил скрипт для воспроизведения видео на YouTube, где я его редактировал, чтобы повысить способность jquery (я новичок). И я только начал замечать, как он может обновляться без обновления. В любом случае, этот сценарий воспроизведения видео дает мне список видео по праву на выбор, и он будет воспроизводить видео. Тем не менее, я пытаюсь сделать это там, где, если вы нажмете на видео сбоку, он выделит div, отображающий клип-видео, и измените выделенный 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 функции, она портит все дело, где я даже не могу нажать на видео больше. может ли кто-нибудь помочь?

ответ

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'); 
} 

Update:

<!-- 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'); 
} 
Смежные вопросы