|
|
@@ -1,211 +1,217 @@ |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
|
<head> |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
<title>Untitled Document</title> |
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
//------------------------------------------------- |
|
|
// youtube playlist jquery plugin |
|
|
// Created by dan@geckonm.com |
|
|
// Custom by kien.hnaptech@gmail.com |
|
|
//------------------------------------------------- |
|
|
|
|
|
jQuery.fn.ytplaylist = function(options) { |
|
|
|
|
|
// default settings |
|
|
var options = jQuery.extend( { |
|
|
holderId: 'ytvideo', |
|
|
playerHeight: '300', |
|
|
playerWidth: '450', |
|
|
addThumbs: false, |
|
|
thumbSize: 0, // init : 0, 1 , 2 |
|
|
showInline: false, |
|
|
autoPlay: true, |
|
|
showRelated: true, |
|
|
allowFullScreen: false |
|
|
},options); |
|
|
|
|
|
return this.each(function() { |
|
|
|
|
|
var selector = $(this); |
|
|
var autoPlay = ""; |
|
|
var showRelated = "&rel=0"; |
|
|
var fullScreen = ""; |
|
|
if(options.autoPlay) autoPlay = "&autoplay=1"; |
|
|
if(options.showRelated) showRelated = "&rel=1"; |
|
|
if(options.allowFullScreen) fullScreen = "&fs=1"; |
|
|
|
|
|
//throw a youtube player in |
|
|
function play(id) |
|
|
{ |
|
|
var html = ''; |
|
|
|
|
|
html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">'; |
|
|
html += '<param name="movie" value="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>'; |
|
|
html += '<param name="wmode" value="transparent"> </param>'; |
|
|
if(options.allowFullScreen) { |
|
|
html += '<param name="allowfullscreen" value="true"> </param>'; |
|
|
} |
|
|
html += '<embed src="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"'; |
|
|
if(options.allowFullScreen) { |
|
|
html += ' allowfullscreen="true" '; |
|
|
} |
|
|
html += 'type="application/x-shockwave-flash" wmode="transparent" height="'+options.playerHeight+'" width="'+options.playerWidth+'"></embed>'; |
|
|
html += '</object>'; |
|
|
|
|
|
return html; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html) |
|
|
function youtubeid(url) { |
|
|
var ytid = url.match("[\\?&]v=([^&#]*)"); |
|
|
ytid = ytid[1]; |
|
|
return ytid; |
|
|
}; |
|
|
|
|
|
|
|
|
//load inital video |
|
|
var firstVid = selector.find(".yt-video:first").addClass("currentvideo").attr("href"); |
|
|
$("#"+options.holderId+"").html(play(youtubeid(firstVid))); |
|
|
|
|
|
//load video on request |
|
|
selector.find(".yt-video").click( function() { |
|
|
if(options.showInline) { |
|
|
selector.find(".currentvideo").removeClass("currentvideo"); |
|
|
$(this).addClass("currentvideo").html(play(youtubeid($(this).attr("href")))); |
|
|
} |
|
|
else { |
|
|
$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href")))); |
|
|
selector.find(".currentvideo").removeClass("currentvideo"); |
|
|
$(this).addClass("currentvideo"); |
|
|
} |
|
|
return false; |
|
|
}); |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
<title>Untitled Document</title> |
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
//------------------------------------------------- |
|
|
// youtube playlist jquery plugin |
|
|
// Created by dan@geckonm.com |
|
|
// Custom by kien.hnaptech@gmail.com |
|
|
//------------------------------------------------- |
|
|
|
|
|
jQuery.fn.ytplaylist = function(options) { |
|
|
|
|
|
// default settings |
|
|
var options = jQuery.extend( { |
|
|
holderId: 'ytvideo', |
|
|
playerHeight: '300', |
|
|
playerWidth: '450', |
|
|
addThumbs: false, |
|
|
thumbSize: 0, // init : 0, 1 , 2 |
|
|
showInline: false, |
|
|
autoPlay: true, |
|
|
showRelated: true, |
|
|
allowFullScreen: false |
|
|
},options); |
|
|
|
|
|
return this.each(function() { |
|
|
|
|
|
var selector = $(this); |
|
|
var autoPlay = ""; |
|
|
var showRelated = "&rel=0"; |
|
|
var fullScreen = ""; |
|
|
if(options.autoPlay) autoPlay = "&autoplay=1"; |
|
|
if(options.showRelated) showRelated = "&rel=1"; |
|
|
if(options.allowFullScreen) fullScreen = "&fs=1"; |
|
|
|
|
|
//throw a youtube player in |
|
|
function play(id) |
|
|
{ |
|
|
var html = ''; |
|
|
|
|
|
html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">'; |
|
|
html += '<param name="movie" value="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>'; |
|
|
html += '<param name="wmode" value="transparent"> </param>'; |
|
|
if(options.allowFullScreen) { |
|
|
html += '<param name="allowfullscreen" value="true"> </param>'; |
|
|
} |
|
|
html += '<embed src="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"'; |
|
|
if(options.allowFullScreen) { |
|
|
html += ' allowfullscreen="true" '; |
|
|
} |
|
|
html += 'type="application/x-shockwave-flash" wmode="transparent" height="'+options.playerHeight+'" width="'+options.playerWidth+'"></embed>'; |
|
|
html += '</object>'; |
|
|
|
|
|
return html; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
var formatSecondsAsTime = function( secs ) { |
|
|
var hr = Math.floor(secs / 3600), |
|
|
min = Math.floor((secs - (hr * 3600)) / 60), |
|
|
sec = Math.floor(secs - (hr * 3600) - (min * 60)); |
|
|
if (hr < 10) { |
|
|
hr = "0" + hr; |
|
|
} |
|
|
if (min < 10) { |
|
|
min = "0" + min; |
|
|
} |
|
|
if (sec < 10) { |
|
|
sec = "0" + sec; |
|
|
} |
|
|
if (hr) { |
|
|
hr = "00"; |
|
|
} |
|
|
if (secs >= 3600){ |
|
|
return hr + ':' + min + ':' + sec; |
|
|
} else { |
|
|
return min + ':' + sec; |
|
|
} |
|
|
}; |
|
|
|
|
|
function getYouTubeInfo(ytid ,ele) { |
|
|
$.ajax({ |
|
|
url: "http://gdata.youtube.com/feeds/api/videos/"+ytid+"?v=2&alt=json", |
|
|
'global': false, |
|
|
dataType: "jsonp", |
|
|
error: function (xhr, textStatus, error) { |
|
|
console.log('error: '+ error); |
|
|
}, |
|
|
success: function (data) { parseresults(data, ele)} |
|
|
}); |
|
|
//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html) |
|
|
function youtubeid(url) { |
|
|
var ytid = url.match("[\\?&]v=([^&#]*)"); |
|
|
ytid = ytid[1]; |
|
|
return ytid; |
|
|
}; |
|
|
|
|
|
|
|
|
//load inital video |
|
|
var firstVid = selector.find(".yt-video:first").addClass("currentvideo").attr("href"); |
|
|
$("#"+options.holderId+"").html(play(youtubeid(firstVid))); |
|
|
|
|
|
//load video on request |
|
|
selector.find(".yt-video").click( function() { |
|
|
if(options.showInline) { |
|
|
selector.find(".currentvideo").removeClass("currentvideo"); |
|
|
$(this).addClass("currentvideo").html(play(youtubeid($(this).attr("href")))); |
|
|
} |
|
|
else { |
|
|
$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href")))); |
|
|
selector.find(".currentvideo").removeClass("currentvideo"); |
|
|
$(this).addClass("currentvideo"); |
|
|
} |
|
|
return false; |
|
|
}); |
|
|
|
|
|
function parseresults(data, ele) { |
|
|
var videoTitle = data.entry.title.$t; |
|
|
var videoDuration = formatSecondsAsTime(data.entry.media$group.yt$duration.seconds); |
|
|
var thumb_url = data.entry.media$group.media$thumbnail[options.thumbSize].url; |
|
|
ele.append( "<img src='"+thumb_url+"' alt='"+videoTitle+"' title='"+videoTitle+"' /><span class='title'>"+videoTitle+"</span><span class='duration'>"+videoDuration+"</span>" ); |
|
|
var formatSecondsAsTime = function( secs ) { |
|
|
var hr = Math.floor(secs / 3600), |
|
|
min = Math.floor((secs - (hr * 3600)) / 60), |
|
|
sec = Math.floor(secs - (hr * 3600) - (min * 60)); |
|
|
if (hr < 10) { |
|
|
hr = "0" + hr; |
|
|
} |
|
|
if (min < 10) { |
|
|
min = "0" + min; |
|
|
} |
|
|
if (sec < 10) { |
|
|
sec = "0" + sec; |
|
|
} |
|
|
if (hr) { |
|
|
hr = "00"; |
|
|
} |
|
|
if (secs >= 3600){ |
|
|
return hr + ':' + min + ':' + sec; |
|
|
} else { |
|
|
return min + ':' + sec; |
|
|
} |
|
|
}; |
|
|
|
|
|
function getYouTubeInfo(ytid ,ele) { |
|
|
$.ajax({ |
|
|
url: "http://gdata.youtube.com/feeds/api/videos/"+ytid+"?v=2&alt=json", |
|
|
'global': false, |
|
|
dataType: "jsonp", |
|
|
error: function (xhr, textStatus, error) { |
|
|
console.log('error: '+ error); |
|
|
}, |
|
|
success: function (data) { parseresults(data, ele)} |
|
|
}); |
|
|
} |
|
|
|
|
|
function parseresults(data, ele) { |
|
|
var videoTitle = data.entry.title.$t; |
|
|
var videoDuration = formatSecondsAsTime(data.entry.media$group.yt$duration.seconds); |
|
|
var thumb_url = data.entry.media$group.media$thumbnail[options.thumbSize].url; |
|
|
var hash = videoTitle.split(" ").join("-"); |
|
|
|
|
|
//do we want thumns with that? |
|
|
if(options.addThumbs) { |
|
|
selector.find(".yt-video").each(function(i){ |
|
|
var video_id= youtubeid($(this).attr("href")); |
|
|
getYouTubeInfo(video_id, $(this)); |
|
|
}); |
|
|
ele.append("<img src='" + thumb_url + "' alt='" + videoTitle + "' title='" + videoTitle + "' /><span class='title'>" + videoTitle + "</span><span class='duration'>" + videoDuration + "</span>") |
|
|
.attr("data-hash", "video=" + hash); |
|
|
}else { |
|
|
ele.append("<span class='title'>" + videoTitle + "</span><span class='duration'>" + videoDuration + "</span>") |
|
|
.attr("data-hash", "video=" + hash); |
|
|
} |
|
|
} |
|
|
|
|
|
selector.find(".yt-video").each(function(i){ |
|
|
var video_id= youtubeid($(this).attr("href")); |
|
|
getYouTubeInfo(video_id, $(this)); |
|
|
}); |
|
|
|
|
|
}; |
|
|
</script> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
|
|
$(function() { |
|
|
$("ul.demo1").ytplaylist({ |
|
|
holderId: 'ytvideo', |
|
|
autoPlay: true |
|
|
}); |
|
|
$("ul.demo2").ytplaylist({ |
|
|
addThumbs:true, |
|
|
thumbSize: 0, // init : 0, 1 , 2 |
|
|
autoPlay: false, |
|
|
holderId: 'ytvideo2', |
|
|
playerHeight: '300' |
|
|
}); |
|
|
}); |
|
|
|
|
|
}; |
|
|
</script> |
|
|
|
|
|
</script> |
|
|
|
|
|
<style type="text/css"> |
|
|
#ytvideo, |
|
|
#ytvideo2 { |
|
|
float: left; |
|
|
margin-right:10px; |
|
|
} |
|
|
.yt_holder { |
|
|
background: #f3f3f3; |
|
|
padding: 10px; |
|
|
float: left; |
|
|
border: 1px solid #e3e3e3; |
|
|
margin-bottom:15px; |
|
|
} |
|
|
ul { |
|
|
float: left; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
width: 220px; |
|
|
} |
|
|
ul li { |
|
|
list-style-type: none; |
|
|
display:block; |
|
|
background: #f1f1f1; |
|
|
float: left; |
|
|
width: 216px; |
|
|
margin-bottom: 5px; |
|
|
padding:2px; |
|
|
|
|
|
} |
|
|
ul li img { |
|
|
width: 120px; |
|
|
float: left; |
|
|
margin-right: 5px; |
|
|
border: 1px solid #999; |
|
|
} |
|
|
ul li a { |
|
|
font-family: georgia; |
|
|
text-decoration: none; |
|
|
display: block; |
|
|
color: #000; |
|
|
} |
|
|
.currentvideo { |
|
|
background: #e6e6e6; |
|
|
} |
|
|
|
|
|
</style> |
|
|
<script type="text/javascript"> |
|
|
|
|
|
$(function() { |
|
|
$("ul.demo1").ytplaylist({ |
|
|
holderId: 'ytvideo', |
|
|
autoPlay: true |
|
|
}); |
|
|
$("ul.demo2").ytplaylist({ |
|
|
addThumbs:true, |
|
|
thumbSize: 0, // init : 0, 1 , 2 |
|
|
autoPlay: false, |
|
|
holderId: 'ytvideo2', |
|
|
playerHeight: '300' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
<style type="text/css"> |
|
|
#ytvideo, |
|
|
#ytvideo2 { |
|
|
float: left; |
|
|
margin-right:10px; |
|
|
} |
|
|
.yt_holder { |
|
|
background: #f3f3f3; |
|
|
padding: 10px; |
|
|
float: left; |
|
|
border: 1px solid #e3e3e3; |
|
|
margin-bottom:15px; |
|
|
} |
|
|
ul { |
|
|
float: left; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
width: 220px; |
|
|
} |
|
|
ul li { |
|
|
list-style-type: none; |
|
|
display:block; |
|
|
background: #f1f1f1; |
|
|
float: left; |
|
|
width: 216px; |
|
|
margin-bottom: 5px; |
|
|
padding:2px; |
|
|
|
|
|
} |
|
|
ul li img { |
|
|
width: 120px; |
|
|
float: left; |
|
|
margin-right: 5px; |
|
|
border: 1px solid #999; |
|
|
} |
|
|
ul li a { |
|
|
font-family: georgia; |
|
|
text-decoration: none; |
|
|
display: block; |
|
|
color: #000; |
|
|
} |
|
|
.currentvideo { |
|
|
background: #e6e6e6; |
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
</head> |
|
|
|
|
|
|
kiennt2 revised this gist