带有 XML 和按钮的动态 HTML5 播放器

Question

我目前正在为一所盖尔语学校开发一个网站。目前他们将 Flash 用于 Web 应用程序，我将在下面 link，但是我正在尝试 create/re-create 它在 HTML5 中，因为它目前无法每个人都可以访问。

该应用程序由按钮组成，所有按钮均由 XML 输入绘制，另一个 XML 文件包含按下每个按钮时播放的 mp3 数据。一个 XML 文件绘制框，而另一个文件填充它们。

A link 到此应用程序：“http://ceres.napier.ac.uk/staff/alistair/gaelicparenthelp/ff_sets.html”

如您所见，单击一个按钮后，会出现更多按钮。

我已经尝试遵循 HTML5 媒体播放器的指南，但是我不完全理解如何读取 XML 文件来创建这些格式，如图所示。我也研究过树格式，但也找不到合适的起点。

如果有人能给我正确的方向，我会非常感激，我的搜索总是让我半途而废，因为它们不完全是我要找的东西。

谢谢！

Answer 1

您需要 Read XML file using javascript 或 jQuery 的 load 和选择器才能读取您的 XML 文件。

对于 HTML 元素，最好的选择可能是利用动态元素创建。这是读取 XML 数据的演示：

var xml= '<ASSETS><Box ><id>1</id><url>bogsa01.xml</url><text>Bogsa1</text></Box><Box ><id>2</id><url>bogsa02.xml</url><text>Bogsa2</text></Box><Box ><id>3</id><url>bogsa03.xml</url><text>Bogsa3</text></Box><Box ><id>4</id><url>bogsa04.xml</url><text>Bogsa4</text></Box></ASSETS>';

var xmlDoc = $.parseXML( xml ); 
var $xml = $(xmlDoc);
var $box = $xml.find("Box");

$box.each(function(){
   var id = $(this).find('id').text();
   var text = $(this).find('text').text();
   var url = $(this).find('url').text();
   // From here you can do whatever you want with the data 
   $("#BoxList" ).append('<li><b>ID: </b>' +id+ '  <b>TEXT: </b> '+text+ '  <b>URL: </b> ' +url+ '</li>'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="BoxList">XML:</div>

带有 XML 和按钮的动态 HTML5 播放器

Dynamic HTML5 Player with XML and Buttons

javascript

xml

html

media-player