Copied to clipboard

Flag this post as spam?

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


  • deeppatel 25 posts 95 karma points
    Jun 13, 2017 @ 11:25
    deeppatel
    0

    How to use HTML5 video in content page and pass parameter.

    Hi,

    i have installed HTML5 video package in my solution but when i use HTML5 video inside content page and pass parameter like HTML ID,CSS class,poster image url,MP4 video Url(like ~/media/2000/aw.mp4), Webm video Url,Ogg video Url,Video width,video height then it gives error like

    "Error parsing XSLT file: HTML5Video/Video.xslt"

    so anyone know how to fix this error and load video in my website.

    thanks.

  • Alex Skrypnyk 6182 posts 24284 karma points MVP 8x admin c-trib
    Jul 14, 2017 @ 10:47
    Alex Skrypnyk
    0

    Hi Deeppatel

    Can you share xslt code?

    Thanks,

    Alex

  • deeppatel 25 posts 95 karma points
    Jul 14, 2017 @ 10:59
    deeppatel
    0

    thanks for reply,this is my xslt file

    <?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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
    
      <xsl:output method="xml" omit-xml-declaration="yes"/>
    
      <xsl:template match="/">
    
        <xsl:call-template name="html5Video">
          <xsl:with-param name="htmlID"         select="/macro/htmlID" />
          <xsl:with-param name="css"            select="/macro/css" />
          <xsl:with-param name="posterImageUrl" select="/macro/posterImageUrl" />
          <xsl:with-param name="sourceMP4"      select="/macro/sourceMP4" />
          <xsl:with-param name="sourceWebM"     select="/macro/sourceWebM" />
          <xsl:with-param name="sourceOgg"      select="/macro/sourceOgg" />
          <xsl:with-param name="videoWidth"     select="/macro/videoWidth" />
          <xsl:with-param name="videoHeight"    select="/macro/videoHeight" />
          <xsl:with-param name="videoPreload"   select="/macro/videoPreload" />
          <xsl:with-param name="videoAutoplay"  select="/macro/videoAutoplay"/>
          <xsl:with-param name="videoControls"  select="/macro/videoControls" />
          <xsl:with-param name="downloadLinks"  select="/macro/downloadLinks"/>
        </xsl:call-template>
    
      </xsl:template>
    
      <xsl:template name="html5Video">
    
        <!-- PARAMETERS -->
        <xsl:param name="htmlID" />         <!-- Id of the video tag -->
        <xsl:param name="css" />            <!-- A css class for the video tag -->
        <xsl:param name="posterImageUrl" /> <!-- Url to a poster image -->
        <xsl:param name="sourceMP4" />      <!-- Comma seperated list of mp4 url sources -->
        <xsl:param name="sourceWebM" />     <!-- Comma seperated list of webM url sources -->
        <xsl:param name="sourceOgg" />      <!-- Comma seperated list of ogg url sources -->
        <xsl:param name="videoWidth" />     <!-- Width of video - Integer -->
        <xsl:param name="videoHeight" />    <!-- Height of video - Integer -->
        <xsl:param name="videoPreload" />   <!-- Preload the video - Boolean -->
        <xsl:param name="videoAutoplay" />  <!-- Autoplay the video - Boolean -->
        <xsl:param name="videoControls" />  <!-- Show video controls to control the video - Boolean -->
        <xsl:param name="downloadLinks" />  <!-- Show download links if the video cant display - Boolean -->
    
        <xsl:choose>
          <xsl:when test="$htmlID != '' and $videoWidth != '' and $videoHeight != '' and ( $sourceMP4 != '' or $sourceWebM != '' or $sourceOgg != '' )">
    
            <xsl:variable name="sourcesMP4"   select="Exslt.ExsltStrings:split( $sourceMP4, ',' )" />
            <xsl:variable name="sourcesWebM"  select="Exslt.ExsltStrings:split( $sourceWebM, ',' )" />
            <xsl:variable name="sourcesOgg"   select="Exslt.ExsltStrings:split( $sourceOgg, ',' )" />
    
            <!-- Begin VideoJS -->
            <div class="video-js-box">
              <xsl:if test="$css != ''">
                <xsl:attribute name="class">
                  <xsl:value-of select="concat('video-js-box',' ', $css)" />
                </xsl:attribute>
              </xsl:if>
    
              <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
              <video id="{$htmlID}" class="video-js" width="{$videoWidth}" height="{$videoHeight}">
    
                <!-- Controls (Attribute) -->
                <xsl:if test="$videoControls = 1">
                  <xsl:attribute name="controls">
                    <xsl:text>controls</xsl:text>
                  </xsl:attribute>
                </xsl:if>
    
                <!-- Preload (Attribute) -->
                <xsl:if test="$videoPreload = 1">
                  <xsl:attribute name="preload">
                    <xsl:text>auto</xsl:text>
                  </xsl:attribute>
                </xsl:if>
    
                <!-- Autoplay (Attribute) -->
                <xsl:if test="$videoAutoplay = 1">
                  <xsl:attribute name="autoplay">
                    <xsl:text>autoplay</xsl:text>
                  </xsl:attribute>
                </xsl:if>
    
                <!-- Poster (Attribute) -->
                <xsl:if test="$posterImageUrl != ''">
                  <xsl:attribute name="poster">
                    <xsl:value-of select="$posterImageUrl"/>
                  </xsl:attribute>
                </xsl:if>
    
                <!-- VIDEOS -->
                <xsl:if test="count($sourcesMP4) > 0">
                  <xsl:for-each select="$sourcesMP4">
                    <source src="{.}" type="video/mp4;" />
                  </xsl:for-each>
                </xsl:if>
                <xsl:if test="count($sourcesWebM) > 0">
                  <xsl:for-each select="$sourcesWebM">
                    <source src="{.}" type="video/webm" />
                  </xsl:for-each>
                </xsl:if>
                <xsl:if test="count($sourcesOgg) > 0">
                  <xsl:for-each select="$sourcesOgg">
                    <source src="{.}" type="video/ogg" />
                  </xsl:for-each>
                </xsl:if>
    
                <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
                <object class="vjs-flash-fallback" width="{$videoWidth}" height="{$videoHeight}" type="application/x-shockwave-flash"
                        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                  <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                  <param name="allowfullscreen" value="true" />
                  <param name="flashvars">
                    <!-- No other nice way to build this string up -->
                    <xsl:attribute name="value">
                      <xsl:text>config={"playlist":[</xsl:text>
                      <xsl:if test="$posterImageUrl != ''">
                        <xsl:text>"</xsl:text>
                        <xsl:value-of select="$posterImageUrl"/>
                        <xsl:text>",</xsl:text>
                      </xsl:if>
    
                      <xsl:text>{"url": "</xsl:text>
                      <xsl:value-of select="$sourcesMP4[1]" />
                      <xsl:text>"</xsl:text>
    
                      <xsl:text>,"autoPlay":</xsl:text>
                      <xsl:choose>
                        <xsl:when test="$videoAutoplay = 1">
                          <xsl:text>true</xsl:text>
                        </xsl:when>
                        <xsl:otherwise>
                          <xsl:text>false</xsl:text>
                        </xsl:otherwise>
                      </xsl:choose>
    
                      <xsl:text>,"autoBuffering":</xsl:text>
                      <xsl:choose>
                        <xsl:when test="$videoPreload = 1">
                          <xsl:text>true</xsl:text>
                        </xsl:when>
                        <xsl:otherwise>
                          <xsl:text>false</xsl:text>
                        </xsl:otherwise>
                      </xsl:choose>
    
                      <xsl:text>}]}</xsl:text>
                    </xsl:attribute>
                  </param>
    
                  <xsl:if test="$posterImageUrl != ''">
                    <!-- Image Fallback. Typically the same as the poster image. -->
                    <img src="{$posterImageUrl}" width="{$videoWidth}" height="{$videoHeight}" alt="Poster Image" title="No video playback capabilities." />
                  </xsl:if>
                </object>
              </video>
    
              <!-- Download links provided for devices that can't play video in the browser. -->
              <xsl:if test="$downloadLinks = 1">
                <p class="vjs-no-video">
                  <strong>Download Video:</strong>
                  <xsl:if test="count($sourcesMP4) > 0">
                    <xsl:for-each select="$sourcesMP4">
                      <a href="{.}">MP4</a>
                    </xsl:for-each>
                  </xsl:if>
                  <xsl:if test="count($sourcesWebM) > 0">
                    <xsl:for-each select="$sourcesWebM">
                      <a href="{.}">WebM</a>
                    </xsl:for-each>
                  </xsl:if>
                  <xsl:if test="count($sourcesOgg) > 0">
                    <xsl:for-each select="$sourcesOgg">
                      <a href="{.}">Ogg</a>
                    </xsl:for-each>
                  </xsl:if>
                </p>
              </xsl:if>
            </div>
            <!-- End VideoJS -->
    
          </xsl:when>
          <xsl:otherwise>
            <div>
              You have to specify - htmlID, videoWidth, videoHeight and 1 of the video sources ( sourceMP4, sourceWebM, sourceOgg )
            </div>
          </xsl:otherwise>
        </xsl:choose>
    
      </xsl:template>
    
    </xsl:stylesheet>
    
  • 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