jQuery Vimeo播放器

Posted 2021-02-25

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.

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