使用XSLT扩展HTML5视频元素

我为自定义UI创建了一些标记/ css和JavaScript，以便与HTML5 < video>标记一起使用，并且希望使用XSLT替换我的网页中的视频元素。使用XSLT扩展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。

感谢您的任何帮助。

来源

2011-09-03 Chris_F

所以，@克里斯，你有一个很好的答案。你为什么还没接受呢？ –

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

<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>

来源

2011-09-03 21:12:54

太好了。我注意到所有添加到文档中的元素都有一个xmlns属性和XHTML名称空间。有没有办法阻止它添加xmlns属性，因为它是不必要的？ –

哦，只是注意到你有在XSLT本身定义的xmlns属性。 –

是的，它们在XSLT中，因此它们不会出现在输出中：D –

使用XSLT扩展HTML5视频元素

回答

相关问题