Advanced Search

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.

Expand | Embed | Plain Text

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.