动态HTML5播放器与XML和按钮

Dynamic HTML5 Player with XML and Buttons

本文关键字：按钮 XML HTML5 播放器 动态      更新时间：2023-09-26

我目前正在为一所盖尔语学校开发一个网站。目前他们使用Flash制作web应用程序，我将在下面链接，但我正在尝试在HTML5中创建/重新创建它，因为它目前无法被所有人访问。

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

此应用程序的链接:"http://ceres.napier.ac.uk/staff/alistair/gaelicparenthelp/ff_sets.html"

你可以看到，当一个按钮被点击，更多的出现。

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

如果有人能给我指明正确的方向，我会非常感激，我的搜索总是让我失望一半，因为他们不是我想要的。

谢谢!

您需要使用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>

相关文章：