-
-
Save alex2020bhmg/c0252c55a016615dcd0bf177e4b8f57c to your computer and use it in GitHub Desktop.
youtube playlist with jquery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; | |
| }); | |
| 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; | |
| //do we want thumns with that? | |
| if(options.addThumbs) { | |
| ele.append("<img src='" + thumb_url + "' alt='" + videoTitle + "' title='" + videoTitle + "' /><span class='title'>" + videoTitle + "</span><span class='duration'>" + videoDuration + "</span>"); | |
| }else { | |
| ele.append("<span class='title'>" + videoTitle + "</span><span class='duration'>" + videoDuration + "</span>"); | |
| } | |
| } | |
| 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> | |
| <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> | |
| <body> | |
| <div id="page"> | |
| <div class="yt_holder"> | |
| <div id="ytvideo"></div> | |
| <ul class="demo1"> | |
| <li><a class="yt-video" href="https://www.youtube.com/watch?v=5Oy-3V5whds"></a></li> | |
| <li><a class="yt-video" href="https://www.youtube.com/watch?v=Mf1umGc7tzY"></a></li> | |
| <li><a class="yt-video" href="https://www.youtube.com/watch?v=byZO3dMLtpA"></a></li> | |
| </ul> | |
| </div> | |
| <div class="yt_holder"> | |
| <div id="ytvideo2"></div> | |
| <ul class="demo2"> | |
| <li><a class="yt-video" href="https://www.youtube.com/watch?v=7BG88HMRVUc"></a></li> | |
| <li><a class="yt-video" href="https://www.youtube.com/watch?v=eBZjZ6eAzMw"></a></li> | |
| <li><a class="yt-video" href="https://www.youtube.com/watch?v=xg7sptEx0Ms"></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment