Return to Snippet

Revision: 34395
at October 23, 2010 06:50 by mloberg


Updated Code
<!-- The HTML, PHP, and jQuery -->

<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'];
?>

Revision: 34394
at October 23, 2010 04:26 by mloberg


Updated Code
<!-- The HTML, PHP, and jQuery -->

<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);

// 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'];
?>

Revision: 34393
at October 22, 2010 02:04 by mloberg


Initial Code
<!-- The HTML, PHP, and jQuery -->

<h3>Vimeo Player</h3>
<div id="vimeoPlayer"></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);

// 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");
		$.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'];
?>

Initial URL


Initial Description
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.

Initial Title
jQuery Vimeo Player

Initial Tags
ajax, php, jquery, json

Initial Language
jQuery