javascript - Embed YouTube html5 Video Player with side thumbnails - Filter videos by Playlist? -
i using next code display html5 youtube player thumbnails other videos displaying right of main video:
http://jsfiddle.net/nmva9/490/
<html> <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> <script language="javascript"> <!-- /* copyright 2011 : simone gianni <simoneg@apache.org> released under apache license 2.0 http://www.apache.org/licenses/license-2.0 */ (function() { function createplayer(jqe, video, options) { var ifr = $('iframe', jqe); if (ifr.length === 0) { ifr = $('<iframe scrolling="no">'); ifr.addclass('player'); } var src = 'http://www.youtube.com/embed/' + video.id; if (options.playopts) { src += '?'; (var k in options.playopts) { src+= k + '=' + options.playopts[k] + '&'; } src += '_a=b'; } ifr.attr('src', src); jqe.append(ifr); } function createcarousel(jqe, videos, options) { var auto = $('div.carousel', jqe); if (car.length === 0) { auto = $('<div>'); car.addclass('carousel'); jqe.append(car); } $.each(videos, function(i,video) { options.thumbnail(car, video, options); }); } function createthumbnail(jqe, video, options) { var imgurl = video.thumbnails[0].url; var img = $('img[src="' + imgurl + '"]'); if (img.length !== 0) return; img = $('<img>'); img.addclass('thumbnail'); jqe.append(img); img.attr('src', imgurl); img.attr('title', video.title); img.click(function() { options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}})); }); } var defoptions = { autoplay: false, user: null, carousel: createcarousel, player: createplayer, thumbnail: createthumbnail, loaded: function() {}, playopts: { autoplay: 0, egm: 1, autohide: 1, fs: 1, showinfo: 0 } }; $.fn.extend({ youtubechannel: function(options) { var md = $(this); md.addclass('youtube'); md.addclass('youtube-channel'); var allopts = $.extend(true, {}, defoptions, options); allopts.maindiv = md; $.getjson('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) { var feed = data.feed; var videos = []; $.each(feed.entry, function(i, entry) { var video = { title: entry.title.$t, id: entry.id.$t.match('[^/]*$'), thumbnails: entry.media$group.media$thumbnail }; videos.push(video); }); allopts.allvideos = videos; allopts.carousel(md, videos, allopts); allopts.player(md, videos[0], allopts); allopts.loaded(videos, allopts); }); } }); })(); $(function() { $('#player').youtubechannel({user:'nellrobinsonmusic'}); }); // --> </script> <style type="text/css"> <!-- #player { width: 853px; height: 480px; overflow: hidden; background: none; position: absolute; border: none; } .youtube .carousel { width: 20%; height: 100%; overflow: auto; position: absolute; right: 0px; z-index: 3; } .youtube .thumbnail { margin: 2px; width: 80%; border: 1px solid black; } .youtube iframe.player { width: 80%; height: 480px; overflow: auto; border: 0; } --> </style> </head> <body> <div id="player"> </div> </body> </html> all of working should, however, lists videos in youtube channel. know how limit videos in particular youtube playlist?
any help appreciated. give thanks you!
javascript html5 video youtube playlist
No comments:
Post a Comment