Расширение элемента видео HTML5 с помощью XSLT - PullRequest
Новая
       0

Расширение элемента видео HTML5 с помощью XSLT

2 голосов
/ 04 сентября 2011

Я создал несколько разметки / CSS и JavaScript для пользовательского интерфейса, который будет использоваться с тегом HTML5 , и хотел бы использовать XSLT для замены на него элементов видео на моих веб-страницах.

Вот пример документа 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 расширения видео, а затем обернуть элементы видео в div вместе с остальной частью моей разметки пользовательского интерфейса. Это должно работать для любого действительного документа XHTML5, а выходные данные также должны быть действительными XHTML5.

Спасибо за любую помощь.

1 Ответ

2 голосов
/ 04 сентября 2011

Вы можете использовать правило идентификации и переопределить нужные элементы. Например, следующее преобразование: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...