Copied to clipboard

Flag this post as spam?

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


  • Cre8tive 7 posts 27 karma points
    Aug 09, 2012 @ 17:40
    Cre8tive
    0

    Adding JW Player ... Need a little help

    Thank you in advance for any help provided...

    I'm a complete newb in Umbraco, know nothing about ASP.NET, and am utterly lost ... so pelase be gentle.

    I am working on a site that needs a video player and decided to go with JW Player because that is what I am most familiar with. I created the XLST and Macro and everything is working except for the image thumbnail.

    I may be missing a step (since I am new to this) or there may be something wrong with my code. I basically took the videoNode (which works) and duplicated it for the imageNode.

    ---------------------------------------------------XLST---------------------------------------------------

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:umbraco.library="urn:umbraco.library"
        exclude-result-prefixes="msxml umbraco.library">


    <xsl:output method="html" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>
    <xsl:variable name="videonode" select="/macro/videoNode"/>
    <xsl:variable name="videoid" select="generate-id($videonode)"/>
    <xsl:variable name="videopath" select="$videonode/File/umbracoFile"/>
    <xsl:variable name="videoheight" select="/macro/VideoHeight"/>
    <xsl:variable name="videowidth" select="/macro/VideoWidth"/>
          
    <xsl:variable name="imagenode" select="/macro/imageNode"/>
    <xsl:variable name="imageid" select="generate-id($imagenode)"/>
    <xsl:variable name="imagepath" select="$imagenode/File/umbracoFile"/>


    <xsl:template match="/">

    <!-- JW Player ============================================================= -->
      
    <script type='text/javascript' src='/scripts/jwplayer/jwplayer.js'></script>
     
    <div id='mediaspace'>This text will be replaced</div>  
    <script type='text/javascript'>
      jwplayer('mediaspace').setup({
        'flashplayer': '/scripts/jwplayer/player.swf',
        'file': '<xsl:value-of select="$videopath" />',      
        'image': '<xsl:value-of select="$imagepath" />', 
        'backcolor': 'FFFFFF',
        'frontcolor': '0079c1',
        'lightcolor': 'FFFFFF',
        'screencolor': 'FFFFFF',
        'bufferlength': '25',
        'controlbar': 'bottom',
        'width': '<xsl:value-of select="$videowidth"/>',
        'height': '<xsl:value-of select="$videoheight"/>' <!-- NOTE: must add 24px height to accomodate player control bar -->
      });
    </script>  
    </xsl:template>
    </xsl:stylesheet>


    ---------------------------------------------------The Resulting Macro in the Editor---------------------------------------------------

    <div umb_imagenode="2064" umb_videonode="2060" umb_macroalias="JwPlayer" umb_videoheight="531" umb_videowidth="902" ismacro="true" onresizestart="return false;" umbversionid="e51c497e-99a4-4d75-b514-02821778849a" umbpageid="2019" title="This is rendered content from macro" class="umbMacroHolder"><!-- startUmbMacro --><span style="color: green;"><strong>JW Player</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>

    ---------------------------------------------------The Resulting HTML---------------------------------------------------

    As you can see the "image" (thumbnail) is left blank. Everthing else works perfect.

    <script type="text/javascript" src="/scripts/jwplayer/jwplayer.js"></script><div style="position: relative; width: 902px; height: 531px;" id="mediaspace_wrapper"><object tabindex="0" name="mediaspace" id="mediaspace" bgcolor="#000000" data="/scripts/jwplayer/player.swf" type="application/x-shockwave-flash" height="100%" width="100%"><param value="true" name="allowfullscreen"><param value="always" name="allowscriptaccess"><param value="true" name="seamlesstabbing"><param value="window" name="wmode"><param value="netstreambasepath=http%3A%2F%2Ftestca.chrsolutions.com%2Fvideo%2Fomnia360promo%2F&amp;id=mediaspace&amp;file=%2Fmedia%2F10819%2Fomnia360promo.flv&amp;image=&amp;backcolor=FFFFFF&amp;frontcolor=0079c1&amp;lightcolor=FFFFFF&amp;screencolor=FFFFFF&amp;bufferlength=25&amp;controlbar.position=bottom" name="flashvars"></object></div><script type="text/javascript">
      jwplayer('mediaspace').setup({
        'flashplayer': '/scripts/jwplayer/player.swf',
        'file': '/media/10819/omnia360promo.flv',      
        'image': '',     
        'backcolor': 'FFFFFF',
        'frontcolor': '0079c1',
        'lightcolor': 'FFFFFF',
        'screencolor': 'FFFFFF',
        'bufferlength': '25',
        'controlbar': 'bottom',
        'width': '902',
        'height': '531' 
      });
    </script> 

    ---------------------------------------------------The Macro Parameters---------------------------------------------------

  • Tom Fulton 2030 posts 4996 karma points c-trib
    Aug 10, 2012 @ 03:50
    Tom Fulton
    1

    Hi,

    Welcome to Umbraco!

    I think your issue is that your XSLT for the imagepath is looking for a "File" element where it should be an "Image" element.  The XML in Umbraco stores as elements of the Document or Media Type's alias, for example <Homepage> or <Image>, <File>, etc.  (more info here)  Normally this isn't an issue using GetMedia etc, but the mediaCurrent macro parameter happens to return the parent element as well.

    So you can change to this:

    <xsl:variable name="imagepath" select="$imagenode/Image/umbracoFile"/>

    Or to encompass any media type you could use this also:

    <xsl:variable name="imagepath" select="$imagenode/*/umbracoFile"/>

    Hope this helps,
    Tom 

  • Cre8tive 7 posts 27 karma points
    Aug 10, 2012 @ 15:39
    Cre8tive
    0

    Perfect! Thank you.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies