Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Tom Allen 50 posts 71 karma points
    Oct 25, 2011 @ 13:26
    Tom Allen
    0

    How to use uTube for a video gallery?

    Not quite sure how best to accomplish the following without losing most of uTube's benefits:

    I have a Video Gallery doctype which has multiple Videos as its children, each of which has a uTube URL property.

    What I need to do when a user visits the Video Gallery node is render a list of video thumbnails / captions taken from the child Video nodes, each of which, when clicked, would play the video either in a modal popup or on the child page itself. The thumbnail and caption should come from the Youtube API if possible.

    How can I use the uTube system to generate this list?

  • Tom Allen 50 posts 71 karma points
    Oct 27, 2011 @ 12:25
    Tom Allen
    0

    No ideas?

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Oct 27, 2011 @ 14:15
    Tom Fulton
    1

    Hi Tom,

    You could do this pretty easily with an XSLT macro to list out the video nodes - I did the same in a recent project.

    I guess your question is more about how to get the video thumbnail & description from the YouTube API?  I also had to do this recently, and I couldn't figure out how to do it straight from XSLT - so I wrote a quick XSLT extension that works with uTube and returns the video's thumbnail.  I'll paste it below.

    Perhaps if you find it useful I can look at adding it to the uTube package, or maybe finding out how to do it with the existing uTube XSLT Extensions (I couldn't figure it out the first time, but it's probably possible - probably missed something with the extra namespaces).

            public static string GetYouTubeVideoThumbnail(string videoid)
            {
                string retVal = string.Empty;
                XmlDocument xd = uTube.Core.Extensions.Common.GetVideoData(videoid);
                XmlNamespaceManager rssMgr = new System.Xml.XmlNamespaceManager(xd.NameTable);
                rssMgr.AddNamespace("atom", "http://www.w3.org/2005/Atom");
                rssMgr.AddNamespace("media", "http://search.yahoo.com/mrss/");
                rssMgr.AddNamespace("yt", "http://gdata.youtube.com/schemas/2007");

                if (xd.GetElementsByTagName("error").Count == 0)
                {
                    var tit = xd.SelectSingleNode("/atom:entry/media:group/media:thumbnail[1]", rssMgr);
                    retVal = tit.Attributes["url"].Value;
                }
                else
                {
                    retVal = "";
                }

                return retVal;
            }

            public static string GetYouTubeVideoDescription(string videoid)
            {
                string retVal = string.Empty;
                XmlDocument xd = uTube.Core.Extensions.Common.GetVideoData(videoid);
                XmlNamespaceManager rssMgr = new System.Xml.XmlNamespaceManager(xd.NameTable);
                rssMgr.AddNamespace("atom", "http://www.w3.org/2005/Atom");
                rssMgr.AddNamespace("media", "http://search.yahoo.com/mrss/");
                rssMgr.AddNamespace("yt", "http://gdata.youtube.com/schemas/2007");

                if (xd.GetElementsByTagName("error").Count == 0)
                {
                    var tit = xd.SelectSingleNode("/atom:entry/media:group/media:description", rssMgr);
                    retVal = tit.InnerText;
                }
                else
                {
                    retVal = "";
                }

                return retVal;
            }

    Then in your XSLT once you've setup the XSLT extension, you can just do:

    <img src="{myprefix:GetYouTubeVideoThumbnail(./videoId)}" />
    <xsl:value-of select="umbraco.library:ReplaceLineBreaks(myprefix:GetYouTubeVideoDescription(./videoId))" disable-output-escaping="yes"/>

    Hope this helps,
    -Tom

  • Salman Ansari 7 posts 27 karma points
    Nov 06, 2012 @ 14:38
    Salman Ansari
    0

    Rather then C# code you can use Razor for getting all item from Vedio Gallery Node then display accordingly 

Please Sign in or register to post replies

Write your reply to:

Draft