Posted By

mloberg on 10/22/10


Tagged

ajax php jquery json vimeo


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

creativeboulder
screamwork
Tyster
nickian


jQuery Vimeo Player


 / Published in: jQuery
 

This is a two file video player. I use JSON to get the list of videos from a user, then when a thumbnail is clicked, an AJAX request is sent with the id of the video, and an oEmbed response is sent back.

  1. <!-- The HTML, PHP, and jQuery -->
  2.  
  3. <h3>Vimeo Player</h3>
  4. <div id="vimeoPlayer">Loading latest video...</div>
  5. <div id="vimeoVideoList">
  6. <p>
  7. <?php
  8. // make sure to replace username with your vimeo username
  9. $vimeorequest = 'http://vimeo.com/api/v2/username/videos.json';
  10. $vimeoci = curl_init($vimeorequest);
  11. curl_setopt($vimeoci,CURLOPT_RETURNTRANSFER, TRUE);
  12. $jsondoc = curl_exec($vimeoci);
  13. curl_close($vimeoci);
  14.  
  15. // parameter 'true' is necessary for output as PHP array
  16. $video = json_decode($jsondoc,true);
  17.  
  18. // the number of videos we want to display
  19. $videosToShow = 5;
  20.  
  21. for($i=0;$i<=$videosToShow;$i++){
  22. echo "<a class=\"videoId\" id=\"" . $video[$i]['id'] . "\"><img src=\"" . $video[$i]['thumbnail_medium'] . "\" alt=\"" . $video[$i]['title'] . "\" /></a>";
  23. }
  24.  
  25. ?>
  26. </p>
  27. </div>
  28. <script>
  29. // When it loads, we get the latest video
  30. $.ajax({
  31. type: "GET",
  32. url: "services/vimeocall.php",
  33. data: "id=" + <?php echo $video[0]['id'];?>,
  34. success: function(msg){
  35. $("#vimeoPlayer").html(msg);
  36. }
  37. });
  38. // Then when ever a video is clicked, a request with the video ID is sent
  39. $(".videoId").click(function(){
  40. var videoId = $(this).attr("id");
  41. $("#vimeoPlayer").html("Loading...");
  42. $.ajax({
  43. type: "GET",
  44. url: "services/vimeocall.php",
  45. data: "id=" + videoId,
  46. success: function(msg){
  47. // The script renders out an oEmbed player, we will place that on the page
  48. $("#vimeoPlayer").html(msg);
  49. }
  50. });
  51. });
  52. </script>
  53.  
  54.  
  55. // The PHP file called "vimeocall.php"
  56. <?php
  57. $videoId = $_GET['id'];
  58. $videorequest = 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/' . $videoId;
  59. $videoci = curl_init($videorequest);
  60. curl_setopt($videoci,CURLOPT_RETURNTRANSFER, TRUE);
  61. $videoinput = curl_exec($videoci);
  62.  
  63. // parameter 'true' is necessary for output as PHP array
  64. $videoPlay = json_decode($videoinput,true);
  65.  
  66. echo $videoPlay['html'];
  67. ?>

Report this snippet  

You need to login to post a comment.