使用 XSLT 扩展 HTML5 视频元素

发布于 2024-12-02 14:04:50 字数 1404 浏览 1 评论 0原文

我已经为自定义 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。

感谢您的任何帮助。

原文

I've created some markup/css and JavaScript for a custom UI to be used with the HTML5 <video> tag and would like to use XSLT to replace the video elements in my web pages with it.

Here is an example XHTML document that would be transformed:

<?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 is the XSLT document I'm trying to create, and it's output should hopefully be this:

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

It should leave the rest of the document as is, but add the video extension's CSS and JavaScript files and then wrap the video elements in a div along with the rest of my UI markup. This needs to work for any valid XHTML5 document and the output should also be valid XHTML5.

Thanks for any help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

緦唸λ蓇 2024-12-09 14:04:50

您可以使用身份规则并覆盖所需的元素。例如，以下转换：

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

You can use the identity rule and override the wanted elements. For example, the following transform:

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

outputs:

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

回复收藏 0 原文

~没有更多了~