使用 XSLT 扩展 HTML5 视频元素答案

【问题标题】：Extending HTML5 video element with XSLT使用 XSLT 扩展 HTML5 视频元素
【发布时间】：2011-09-03 20:51:00
【问题描述】：

我已经为自定义 UI 创建了一些标记/css 和 JavaScript，以便与 HTML5

这是一个可以转换的示例 XHTML 文档：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="layout.css" type="text/css"?>
<?xml-stylesheet href="video_extension.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <video src="myvideo.webm"/>
  </body>
</html>

video_extension.xsl 是我正在尝试创建的 XSLT 文档，它的输出应该是这样的：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="layout.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Example</title>
    <script src="video_extension.js" type="text/javascript"/>
    <link rel="stylesheet" href="video_extension.css" type="text/css"/>
  </head>
  <body>
    <div class="video-container">
      <video src="myvideo.webm"/>
      <div class="video-ui>
        <!-- additional markup not included -->
      </div>
    </div>
  </body>
</html>

它应该保留文档的其余部分，但添加视频扩展的 CSS 和 JavaScript 文件，然后将视频元素与我的 UI 标记的其余部分一起包装在一个 div 中。这需要适用于任何有效的 XHTML5 文档，并且输出也应该是有效的 XHTML5。

感谢您的帮助。

【问题讨论】：

所以，@Chris，你得到了一个很好的答案。为什么还没接受呢？

标签： xml xslt xhtml html

【解决方案1】：

您可以使用身份规则并覆盖想要的元素。例如下面的变换：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:x="http://www.w3.org/1999/xhtml">
    <xsl:output indent="yes"/>
    <xsl:strip-space elements="*"/>

    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="x:head">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
            <script src="video_extension.js" type="text/javascript" 
                xmlns="http://www.w3.org/1999/xhtml"/>
            <link rel="stylesheet" href="video_extension.css" type="text/css" 
                xmlns="http://www.w3.org/1999/xhtml"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="x:video">
        <div class="video-container" 
            xmlns="http://www.w3.org/1999/xhtml">
            <xsl:copy-of select="."/>
            <div class="video-ui">
                <!-- additional markup not removed -->
            </div>
        </div>
    </xsl:template>

</xsl:stylesheet>

输出：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="layout.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Example</title>
      <script src="video_extension.js" type="text/javascript"/>
      <link rel="stylesheet" href="video_extension.css" type="text/css"/>
   </head>
   <body>
      <div class="video-container">
         <video src="myvideo.webm"/>
         <div class="video-ui"/>
      </div>
   </body>
</html>

【讨论】：

太好了。我注意到添加到文档中的所有元素都有一个 xmlns 属性和 XHTML 命名空间。有什么办法阻止它添加 xmlns 属性，因为它是不必要的？
哦，刚刚注意到您在 XSLT 本身中定义了 xmlns 属性。
是的，它们在 XSLT 中，因此它们不会出现在输出中：D
这是因为，对于文字元素，如果你告诉处理器该元素在默认命名空间中，它就不需要在输出文档中声明它。
所以，@Chris，你得到了一个很好的答案。为什么还没接受呢？