Posted By

mloberg on 10/22/10

Tagged

Versions (?)

Last Edited at 10/22/10 02:04am

Statistics

Viewed 1119 times

Favorited by 4 user(s)

Related snippets

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.

Highlighted TextExpand

<h3>Vimeo Player</h3>
<div id="vimeoPlayer">Loading latest video...</div>
<div id="vimeoVideoList">
	<p>
<?php
// make sure to replace username with your vimeo username
$vimeorequest = 'http://vimeo.com/api/v2/username/videos.json';
$vimeoci = curl_init($vimeorequest);
curl_setopt($vimeoci,CURLOPT_RETURNTRANSFER, TRUE);
$jsondoc = curl_exec($vimeoci);
curl_close($vimeoci);

// parameter 'true' is necessary for output as PHP array
$video = json_decode($jsondoc,true);

// the number of videos we want to display
$videosToShow = 5;

for($i=0;$i<=$videosToShow;$i++){
	echo "<a class=\"videoId\" id=\"" . $video[$i]['id'] . "\"><img src=\"" . $video[$i]['thumbnail_medium'] . "\" alt=\"" . $video[$i]['title'] . "\" /></a>";
}

?>
	</p>
</div>
<script>
	// When it loads, we get the latest video
	$.ajax({
		type: "GET",
		url: "services/vimeocall.php",
		data: "id=" + <?php echo $video[0]['id'];?>,
		success: function(msg){
			$("#vimeoPlayer").html(msg);
		}
	});
	// Then when ever a video is clicked, a request with the video ID is sent
	$(".videoId").click(function(){
		var videoId = $(this).attr("id");
		$("#vimeoPlayer").html("Loading...");
		$.ajax({
			type: "GET",
			url: "services/vimeocall.php",
			data: "id=" + videoId,
			success: function(msg){
				// The script renders out an oEmbed player, we will place that on the page
				$("#vimeoPlayer").html(msg);
			}
		});
	});
</script>

// The PHP file called "vimeocall.php"
<?php
$videoId = $_GET['id'];
$videorequest = 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/' . $videoId;
$videoci = curl_init($videorequest);
curl_setopt($videoci,CURLOPT_RETURNTRANSFER, TRUE);
$videoinput = curl_exec($videoci);

// parameter 'true' is necessary for output as PHP array
$videoPlay = json_decode($videoinput,true);

echo $videoPlay['html'];
?>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.