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

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

0 голосов
/ 19 декабря 2011

На данный момент у меня есть простое приложение 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)!

Ответы [ 2 ]

1 голос
/ 19 декабря 2011

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

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

0 голосов
/ 19 декабря 2011

вы можете использовать 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>
...