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 6131 posts 23950 karma points MVP 7x 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>
    
Please Sign in or register to post replies

Write your reply to:

Draft