Using the HTML 5 Video Tag in DSpace

I posted the following today on the DSpace wiki as a proof of concept for using the HTML 5 video tag within DSpace using Manakin. The original post can be found here.

Files:

• [manakin-source]/themes/[theme-dir]/template.xsl (The theme’s stylesheet)

• [manakin-source]/themes/dri2xhtml/DIM-Handler.xsl (The theme’s stylesheet)

[edit] Instructions:

• Caution: This is really just a proof of concept for adding support for the HTML5 video tag to xmlui. It’s based on the Classic XMLUI theme, so some things may be different for your application.

1. Add the OGV to the metadata registry using the instructions found here —> Add a new format to the bitstream registry
2. Create an OGV video. If you have Firefox, you can use Firefogg to do it.
3. Upload your video to your DSpace install.
4. If you haven’t already, you need to Create a new theme (or don’t, if you don’t want to).
5. To modify the header, locate the section of DIM-Handler.xsl that begins with <xsl:template match="dim:dim" mode="itemSummaryView-DIM">

. Copy this section into your theme’s local template.xsl and modify the XSLT as noted below.

1. Immediately following the line that reads <table> add the following code:

            <xsl:choose>
                <xsl:when test="ancestor::mets:METS/mets:fileSec/mets:fileGrp[@USE='CONTENT']/mets:file[@MIMETYPE='video/ogg']">
                        <tr class="ds-table-row odd">
                                <td><span class="bold"><i18n:text>xmlui.dri2xhtml.METS-1.0.item-preview</i18n:text>:</span></td>
                                <td>
                                        <xsl:attribute name="href"><xsl:value-of select="@OBJID"/></xsl:attribute>
                                        <video>
                                                <xsl:attribute name="src">
                                                        <xsl:value-of select="ancestor::mets:METS/mets:fileSec/mets:fileGrp[@USE='CONTENT']/mets:file/mets:FLocat[@LOCTYPE='URL']/@xlink:href"/>
                                                </xsl:attribute>
                                                <xsl:attribute name="width">
                                                        <xsl:value-of select="320" />
                                                </xsl:attribute>
                                                <xsl:attribute name="height">
                                                        <xsl:value-of select="240" />
                                                </xsl:attribute>
                                                <xsl:attribute name="controls" />
                                                <xsl:attribute name="autobuffer" />
                                        </video>
                                </td>
                        </tr>
                        </xsl:when>
                        <xsl:otherwise>
                        </xsl:otherwise>
                    </xsl:choose>

1. Of course, stop and start DSpace for good measure.
2. Visit the Item Summary View for the item you uploaded with a Firefox 3.5 or greater browser, and you should have pseudo-streaming enabled.

Retrieved from “http://wiki.dspace.org/index.php/Add_HTML5_pseudo_streaming_(Manakin)“