Как использовать переменную javaScript в PHP?

Question

В настоящее время у меня есть простое приложение для Facebook, которое вытащило видео информацию с канала YouTube.

Как раз сейчас, я вставляю первое видео ответа от YouTube в местозаполнитель вместе с заголовком, представлениями и описанием, и все видеоролики (включая первый) отображаются под разделом, содержащим встроенное видео.

Затем, когда пользователь нажимает на любое из видео эскизов, это видео затем встроено в разделитель div.

Я могу заставить это работать с жестким кодированием идентификатора видео в ассоциативном массиве YouTube, но я не могу понять, как использовать переменную id с PHP в последней строке моего кода jQuery.

Вот мой текущий код:

$url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2'; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch, CURLOPT_REFERER, $url); 
$body = curl_exec($ch); 
curl_close($ch); 
$data = json_decode($body, true); 

?> 
<div id="placeholder" style="font-family:Helvetica; max-width:500px; margin:0 0 20px 0;"> 
<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][0]['id']; ?>" frameborder="0" allowfullscreen></iframe></div> 
<div class="title" style=" font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $data['data']['items'][0]['title']; ?> </div> 
<div class="views" style="color:#BBB; font-size:12px;"><?php echo $data['data']['items'][0]['viewCount'];?> views</div> 
<div class="description" style="font-size:14px;"><?php echo $data['data']['items'][0]['description'];?></div> 
<div class="hr" style="padding:5px 0 0 0; float:left; border-bottom: 1px solid #96CC90; width:480px;"></div> 
</div> 
<?php 

foreach($data['data']['items'] as $item) { 
$id = $item['id']; 
$description = $item['description']; 
$description = str_replace('uk.opticalexpress.com', '', $description); 
$description = str_replace('-', '', $description); 
$description = trim($description); 

$thumb = $item['thumbnail']['sqDefault']; 

$i = 0; 
?> 
<div class="video" id="<?php echo $i; ?>" style="font-family:Helvetica; float:left; max-width:150px; min-height:130px; margin:0 0px 20px 10px;"> 
    <div class="thumb" style="position:relative; left:0; top:0;"> 
     <img src="<?php echo $item['thumbnail']['sqDefault'];?>" title="<?php echo $description;?>" style="position:relative; top:0; left:0px;"/> 
     <img src="../images/play-thumb.png" style="position:absolute; top:30px; left:45px;"/> 
    </div> 
    <div class="title" style="font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $item['title']; ?> </div> 
    <div class="views" style="font-size:12px;"><?php echo $item['viewCount'];?> views</div> 
</div> 

<?php 
$i++; 
} 
?> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.video').click(function() { 
     var id = $(this).attr('id'); 

     $('#placeholder').fadeOut('slow'); 
     $('#placeholder').html('<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][1]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>'); 
     $('#placeholder').fadeIn('slow'); 
    }); 
}); 
</script> 

Извините за стену текста (и инлайн CSS)!

Answer 1

Сложно ... Я бы посмотрел событие click на .video с jQuery, а затем выполнил запрос GET в файл PHP на сервере (RESTish), который сгенерировал HTML-код, необходимый для iframe, затем установил # видео html в html, который вы только что получили. Могу работать ...

Другая возможность - загрузить все фреймы, а затем на .video click, просто покажите, что соответствует одному и тому же уникальному идентификатору или чем-то еще. Это означало бы большее время загрузки для ваших пользователей, но лучше всего использовать подход типа AJAX.

Answer 2

Вы можете использовать ajax, выполнив это, я сделал это так, надеюсь, это также сработает для вас.

<div id="video1" class=".temp"></div> 

<script type="text/javascript"> 

$(document).ready(function() { 
    $('.temp').click(function() { 

     var currentId = $(this).attr('id'); 
     showVideo(currentId); 
    }); 
}; 

function showVideo(str) 
{ 

    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("VideoFrameDiv").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","inc/AjaxOnClickValues.php?id="+str,true); 
    xmlhttp.send(); 
} 
</script>