Able Player Velocity

Able Player Velocity Manual Update

This update page is part of the March 7, 2024, Able Player Manual Update and is not required for Framework sites without localized audio and video chunks Velocity. A Site Manager with experience in Velocity should complete this manual update. Contact Web Services Support with questions.

An automatic update tool is also available. Pages containing audio and video chunks will need to be published after the manual update is applied. You may need to clear your browser's cache to see the updated player. See the IU Knowledge Base document Clear your web browser's cache, cookies, and history.

Complete the steps on Able Player Documentation first.

Note: We strongly recommend publishing all changes to your test/development site first to confirm all audio and video chunks are working as expected. Once confirmed, updates can then be published to your live/production site.

Manual Update Steps Overview

  1. Update the relevant Data Defintions.
  2. Navigate to and edit the Video chunk Velocity file.
  3. Add a Velocity macro to the Video chunk Velocity file.
  4. Include the Velocity macro for HTML5 videos in the same Video chunk Velocity file.
  5. Include the Velocity macro for YouTube videos in the same Video chunk Velocity file.
  6. Include the Velocity macro for Vimeo videos in the same Video chunk Velocity file.
  7. Replace Velocity in three locations in the same Video chunk Velocity file.
  8. Submit to save changes.
  9. Navigate to and edit the Audio chunk Velocity file.
  10. Add a Velocity macro to the Audio chunk Velocity file.
  11. Replace Velocity in one location in the same Audio chunk Velocity file.
  12. Submit to save changes.
  13. If needed, update any missing information on pages with audio or video chunks.
  14. Publish to your test/development site (Sitehost-test) to confirm the update is working as expected.
  15. Publish to your live/production site (Sitehost).

Step 1

Update relevant Data Definitions using the Able Player Manual Update documentation.

Step 2

Navigate to _internal/velocity/Page/Chunks/ and edit the Video file.

Step 3

Add the following GetUniqueId macro to the file:

## generate an unique id for video tag based on file path/url + $currentPagePath + some salt
#macro ( GetUniqueId $tmpSourcePath )
    #set($uniqueId = $tmpSourcePath.hashCode() + $currentPagePath.hashCode())
    #set($uniqueId = $_MathTool.abs($uniqueId))
    #set($uniqueId = "ableplayer-" + "$uniqueId" + "-" + $_MathTool.random(1, 9999))    
#end

Step 4

Include the GetUniqueId macro for HTML5 videos to use Able Player.

#macro(Html5VideoChunkAblePlayer)
    
    ## initialize variables
    #set($mp4 = "/")
    #set($webm = "/")
    #set($ogg = "/")
    #set($vtt = "/")
    #set($thumbnail = "/")
    #set($caption = "")
    #set($attribution = "")
    #set($class = "")
    #set($transcript = "")
    
    ## able-player
    #set($mp4Described = "/")
    #set($webmDescribed = "/")
    #set($headingLevel = "")

    
    ## assign variables
    #set($mp4 = $_XPathTool.selectSingleNode($chunk, "mp4/path").value)
    #set($webm = $_XPathTool.selectSingleNode($chunk, "webm/path").value)
    #set($ogg = $_XPathTool.selectSingleNode($chunk, "ogg-vorbis/path").value)
    #set($vtt = $_XPathTool.selectSingleNode($chunk, "vtt/path").value)
    #set($thumbnail = $_XPathTool.selectSingleNode($chunk, "thumbnail/path").value)
    
    ## able-player
    #set($mp4Described = $_XPathTool.selectSingleNode($chunk, "mp4-described/path").value)
    #set($webmDescribed = $_XPathTool.selectSingleNode($chunk, "webm-described/path").value)
    
    #set($mp4DescribedFallback = '')
    #if($mp4Described != "/")
        #set($mp4DescribedFallback = ' data-desc-src="' + $mp4Described + '" ')
    #end
    #set($webmDescribedFallback = '')
    #if($webmDescribed != "/")
        #set($webmDescribedFallback = ' data-desc-src="' + $webmDescribed + '" ')
    #end
    
    
    #set($caption = $_SerializerTool.serialize($chunk.getChild("caption"), true))
    #set($caption = $_DisplayTool.stripTags($caption,"strong", "em", "a"))
    #set($attribution = $_XPathTool.selectSingleNode($chunk, "attribution").value)
    #set($class = "media video")
    
    #set($transcript = $_SerializerTool.serialize($chunk.getChild("transcript"), true))
    ## heading level for able-player
    #set($headingLevel = $_XPathTool.selectSingleNode($chunk, "heading-level").value)
    
    ## description track
    #set($descriptions = $_XPathTool.selectSingleNode($chunk, "descriptions-file/path").value)
    
    #if($vtt=="/")
        #error("Please provide a .vtt file for closed captions to make the video more accessible.")
    #end
    ## if there's a file show the HTML5 video with optional caption and attribution
    #if($mp4!="/")
        ## able-player
        <figure itemprop="video" itemscope="itemscope" itemtype="http://schema.org/VideoObject">

            ## able-player
            #GetUniqueId($mp4)
            <video id="$uniqueId" data-able-player="" data-root-path="https://assets.iu.edu/libs/able-player/latest" poster="$!thumbnail" controls="" preload="none" data-heading-level="$!headingLevel">

                <source content="$!mp4" itemprop="contentUrl" src="$mp4" type="video/mp4" $mp4DescribedFallback/>
                #if($ogg && $ogg!="/")
                    <source content="$!ogg" itemprop="contentUrl" src="$ogg" type="video/ogg"/>
                #end
                #if($webm!="/")
                    <source content="$!webm" itemprop="contentUrl" src="$webm" type="video/webm" $webmDescribedFallback/>
                #end
                #if($vtt!="/")
                    <track src="$!vtt" srclang="en" label="English" kind="subtitles" type="text/vtt"/>
                #end
                
                ## able-player: descriptions track
                #if($descriptions != "/")
                    <track src="$!descriptions" srclang="en" label="English" kind="descriptions" type="text/vtt"/>
                #end
            </video>
            #if ($caption!= "" or $caption.getChildren().size() > 0)
                <figcaption itemprop="caption">$!caption</figcaption>
            #end
            #if($attribution!="")
                <aside itemprop="copyrightHolder author">#cleanup($attribution)</aside>
            #end
        </figure>
        #if($chunk.getChild("transcript"))
            #if($chunk.getChild("transcript").value!="")
                <div class="visually-hidden"><p>Description of the video:</p>$!transcript</div>
            #else
                #error("Please provide a transcript for the video to make it more accessible.")
            #end
        #end
    #else
        #error("The HTML5 video chunk requires an MP4 file.")
    #end
    
#end

Step 5

Include the GetUniqueId macro for YouTube videos to use Able Player.


#macro(YoutubeChunkAblePlayer)
    
    ## initialize variables
    #set($url = "")
    #set($caption = "")
    #set($role = "")
    #set($class = "")
    #set($wideScreen = "")
    #set($transcript = "")
    #set($title = "")
    
    ## able-player
    #set($descriptions = "")
    #set($videoIdDescribed = "")   
    #set($vtt = "")
    #set($headingLevel = "")


    
    
    
    ## assign variables
    #set ($url = $_EscapeTool.xml($chunk.getChild("url").value))
    
    #if($url.indexOf('watch?v=') != -1)
        #set($urlType = "watch?v=")
    #elseif($url.indexOf('youtu.be/') != -1)
        #set($urlType = "youtu.be/")
    #end
    
    #set($url = $_StringTool.substringAfter($url, $urlType))
    #if($url.indexOf('&') != -1 )
        #set ($url = $_StringTool.substringBefore($url, "&"))
    #end
    ## #set($url = "https://www.youtube.com/embed/" + $url + "?modestbranding=0&amp;rel=0&amp;controls=1&amp;showinfo=0&amp;cc_load_policy=1")
    
    ## able-player
    #set($descriptions = $_XPathTool.selectSingleNode($chunk, "descriptions-file/path").value)
    #set($vtt = $_XPathTool.selectSingleNode($chunk, "vtt/path").value)
    #set($videoIdDescribed = $_EscapeTool.xml($chunk.getChild("video-id-described").value))
    #set($videoIdDescribed = $videoIdDescribed.trim())
    #set($headingLevel = $_XPathTool.selectSingleNode($chunk, "heading-level").value)


    #set($describedFallback = '')
    #if($videoIdDescribed != "")
        #set($describedFallback = ' data-youtube-desc-id = "' + $videoIdDescribed + '" ')
    #end
    
    #set($caption = $_SerializerTool.serialize($chunk.getChild("caption"), true))
    #set($caption = $_DisplayTool.stripTags($caption,"strong", "em", "a"))
    #set($class = "media video")
    
    #set($wideScreen = $_XPathTool.selectNodes($chunk, "widescreen/value"))
    #if ($wideScreen.size() > 0)
        #set($wideScreen = "flex-video widescreen")
    #else
        #set($wideScreen = "flex-video")
    #end
    
    #set($transcript = $_SerializerTool.serialize($chunk.getChild("transcript"), true))
    #set($title = $_XPathTool.selectSingleNode($chunk, "title").value)
    
    #if($url!="")
        #if($url.trim() != $videoIdDescribed.trim())
            <figure itemprop="video" itemscope="itemscope" itemtype="http://schema.org/VideoObject">
                
                ## able-player
                #GetUniqueId($url)
                <video 
                    id="$uniqueId" 
                    data-youtube-id = "$url"
                    data-able-player="" 
                    data-root-path="https://assets.iu.edu/libs/able-player/latest"          
                    itemprop="embedUrl" 
                    preload="auto" 
                    controls=""    
                    data-heading-level="$!headingLevel" 
                    $describedFallback >
                    #if($descriptions != "/")
                        <track src="$!descriptions" srclang="en" label="English" kind="descriptions" type="text/vtt"/>
                    #end
                    
                    #if($vtt!="/")
                        <track src="$!vtt" srclang="en" label="English" kind="subtitles" type="text/vtt"/>
                    #end
                </video>
                
                
                ## END: able-player
                
                
                #if($caption!= "" or $caption.getChildren().size() > 0)
                    <figcaption itemprop="caption">$!caption</figcaption>
                #end
            </figure>
            #if($chunk.getChild("transcript"))
                #if($chunk.getChild("transcript").value!="")
                    <div class="visually-hidden"><p>Description of the video:</p>$!transcript</div>
                #else
                    #error("Please provide a transcript for the video to make it more accessible.")
                #end
            #end
        #else
            #error("The video id of described version ($videoIdDescribed) should not be different from that of non-described version ($url)")
        #end
    #else
        #error("The YouTube video chunk requires a URL. Example: https://www.youtube.com/watch?v=VSL55uE8aGA")
    #end
    
#end

Step 6

Include the GetUniqueId macro for Vimeo videos to use Able Player.


#macro(VimeoChunkAblePlayer)
    
    ## initialize variables
    #set($url = "")
    #set($caption = "")
    #set($role = "")
    #set($class = "")
    #set($wideScreen = "")
    #set($transcript = "")
    #set($title = "")
    
    ## able-player
    #set($descriptions = "")
    #set($videoIdDescribed = "")   
    #set($vtt = "")
    #set($headingLevel = "")
    ## END: able-player

    
    ## assign variables
    #set ($url = $_EscapeTool.xml($chunk.getChild("url").value))
    #set ($url = $_StringTool.substringAfter($url, "vimeo.com/"))
    ## #set ($url = "https://player.vimeo.com/video/" + $url + "?color=990000&amp;title=0&amp;byline=0&amp;badge=0&amp;portrait=0&amp;autopause=0;")
    #set($caption = $_SerializerTool.serialize($chunk.getChild("caption"), true))
    #set($caption = $_DisplayTool.stripTags($caption,"strong", "em", "a"))
    #set($class = "media video")
    
     ## able-player
    #set($descriptions = $_XPathTool.selectSingleNode($chunk, "descriptions-file/path").value)
    #set($vtt = $_XPathTool.selectSingleNode($chunk, "vtt/path").value)
    #set($videoIdDescribed = $_EscapeTool.xml($chunk.getChild("video-id-described").value))
    #set($videoIdDescribed = $videoIdDescribed.trim())
    #set($headingLevel = $_XPathTool.selectSingleNode($chunk, "heading-level").value)


    #set($describedFallback = '')
    #if($videoIdDescribed != "")
        #set($describedFallback = ' data-vimeo-desc-id = "' + $videoIdDescribed + '" ')
    #end
    ## END: able-player

    
    #set($wideScreen = $_XPathTool.selectNodes($chunk, "widescreen/value"))
    #if ($wideScreen.size() > 0)
        #set($wideScreen = "flex-video widescreen")
    #else
        #set($wideScreen = "flex-video")
    #end
    
    #set($transcript = $_SerializerTool.serialize($chunk.getChild("transcript"), true))
    #set($title = $_XPathTool.selectSingleNode($chunk, "title").value)
    
    #if($url!="")
        #if($url.trim() != $videoIdDescribed.trim())

            <figure itemprop="video" itemscope="itemscope" itemtype="http://schema.org/VideoObject">
                
                
                ## able-player
                #GetUniqueId($url)
                <video 
                    id="$uniqueId" 
                    data-vimeo-id = "$url"
                    data-able-player="" 
                    data-root-path="https://assets.iu.edu/libs/able-player/latest"          
                    itemprop="embedUrl" 
                    preload="auto" 
                    controls=""    
                    data-heading-level="$!headingLevel" 
                    $describedFallback >
                    #if($descriptions != "/")
                        <track src="$!descriptions" srclang="en" label="English" kind="descriptions" type="text/vtt"/>
                    #end
                    
                    #if($vtt!="/")
                        <track src="$!vtt" srclang="en" label="English" kind="subtitles" type="text/vtt"/>
                    #end
                </video>
                ## END: able-player
                
                
                
                #if($caption!= "" or $caption.getChildren().size() > 0)
                    <figcaption itemprop="caption">$!caption</figcaption>
                #end
            </figure>
            #if($chunk.getChild("transcript"))
                #if($chunk.getChild("transcript").value!="")
                    <div class="visually-hidden"><p>Description of the video:</p>$!transcript</div>
                #else
                    #error("Please provide a transcript for the video to make it more accessible.")
                #end
            #end
        #else
            #error("The video id of described version ($videoIdDescribed) should not be different from that of non-described version ($url)")
        #end
    #else
        #error("The Vimeo video chunk requires a URL. Example: https://vimeo.com/128429224")
    #end

#end

Step 7

Replace Velocity in three locations of the same Video chunk Velocity file.

Locate the following:

#Html5VideoChunk()

Replace with the following:

#Html5VideoChunkAblePlayer()

Locate the following:

#YoutubeChunk()

Replace with the following:

#YoutubeChunkAblePlayer()

Locate the following:

#VimeoChunk()

Replace with the following:

#VimeoChunkAblePlayer()

Step 8

Submit to save changes.

Step 9

Navigate to _internal/velocity/Page/Chunks/ and edit the Audio file.

Step 10

Add the macro for HTML5 audio to use Able Player

#macro(Html5AudioChunkAblePlayer)
    
    ## initialize variables
    #set($position = "")
    #set($inlineElement = [])
    #set($url = "")
    #set($src = "/")
    #set($caption = "")
    #set($attribution = "")
    #set($transcript = "")
    #set($headingLevel = "")

    
    ## assign variables
    #set($caption = $_SerializerTool.serialize($chunk.getChild("caption"), true))
    #set($caption = $_DisplayTool.stripTags($caption,"strong", "em", "a"))

    #set($attribution = $_XPathTool.selectSingleNode($chunk, "attribution").value)

    #set($src = $_XPathTool.selectSingleNode($chunk, "mp3/path").value)

    #set($transcript = $_SerializerTool.serialize($chunk.getChild("transcript"), true))
    #set($headingLevel = $_XPathTool.selectSingleNode($chunk, "heading-level").value)
    
    #set($dataHeadingLevel = "")
    #if ( $headingLevel != "" )
        #set($dataHeadingLevel = 'data-heading-level="' + $headingLevel + '"')
    #end


    
    #set($uniqueId = $src.hashCode() + $currentPagePath.hashCode())
    #set($uniqueId = $_MathTool.abs($uniqueId))
    #set($uniqueId = "ableplayer-audio-" + "$uniqueId" + "-" + $_MathTool.random(1, 9999)) 
    
    #if($src!="/" and $src!="")
        <figure itemprop="audio" itemscope="itemscope" itemtype="http://schema.org/AudioObject">
            <audio data-able-player="" data-root-path="https://assets.iu.edu/libs/able-player/latest" controls="controls" id="$uniqueId" $dataHeadingLevel>
                <source type="audio/mp3" src="$!src" itemprop="embedUrl" content="$!src"></source>
                <track kind="captions" src="$!vtt" srclang="en" label="English" type="text/vtt"/>
            </audio>
            #if($caption!="" or $caption.getChildren().size() > 0 or $attribution!="")
                <figcaption itemprop="caption">
                    #if($caption!="" or $caption.getChildren().size() > 0)<span class="caption-text">$!caption</span>#end#if(($caption!="" or $caption.getChildren().size() > 0) and $attribution!="")&amp;#160;#end#if($attribution!="")<span class="caption-credit">#cleanup($attribution)</span>#end
                </figcaption>
            #end
        </figure>
         #if($chunk.getChild("transcript"))
            #if($chunk.getChild("transcript").value!="")
                <div class="text"><p>Audio transcript:</p>$!transcript</div>
            #else
                #error("Please provide a transcript for the audio piece to make it more accessible.")
            #end
        #end
    #else
        #error("The HTML5 audio chunk requires an MP3 file.")
    #end
    
#end

Step 11

Replace Velocity in one location of the same Audio chunk Velocity file.

Locate the following:

#Html5AudioChunk()

Replace with the following:

#Html5AudioChunkAblePlayer()

Step 12

Submit to save changes.

Step 13

If needed, update any missing information on pages with audio or video chunks. Please see the updated Audio chunk and Video chunk documentation.

Step 14

Confirm the updates are working as expected by publishing all pages with audio and video chunks to your test/development site (Sitehost-test).

Step 15

Once confirmed, pages with audio and video chunks can be published to your live/production site (Sitehost).

Revert the Update

Did the update not work as expected? You can revert changes to files by following the Hannon Hill Knowledge Base version control instructions. Contact Web Services Support for additional support.