jQuery Vimeo Player


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.