使用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視頻元素

回答

相關問題