帶有XML和按鈕的動態HTML5播放器

我目前正在爲蓋爾學校開發一個網站。目前，他們使用Flash作爲Web應用程序，我將在下面鏈接到該應用程序，但是我正在嘗試在HTML5中創建/重新創建它，因爲目前無法被所有人訪問。帶有XML和按鈕的動態HTML5播放器

應用程序由按鈕組成，所有按鈕都由XML輸入繪製，另一個XML文件包含按下每個按鈕時播放的MP3數據。一個XML文件繪製框，而另一個填充它們。

鏈接到該應用程序：「http://ceres.napier.ac.uk/staff/alistair/gaelicparenthelp/ff_sets.html」

正如你可以看到當點擊一個按鈕，更出現。

我已經嘗試了以下HTML5媒體播放器指南，但是我並不完全理解如何讀取XML文件以創建如圖所示的這些格式。我也研究過樹格式，但是找不到一個開始的好地方。

如果任何人都可以讓我朝着正確的方向發展，我會非常感激，我的搜索不斷讓我失望，因爲他們不是我正在尋找的東西。

謝謝！

來源

2016-10-22 James Gordon

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

來源

2016-10-22 20:47:38

好吧，我已經碰到那幾次，還算明白。我正在使用的XML也處理盒的ID和URL的，像這樣： –

\t \t <盒ID = 「1」 URL = 「bogsa01.xml」> Bogsa1 \t \t <盒ID = 「2」 URL = 「bogsa02.xml」> Bogsa2 \t \t <盒ID = 「3」 URL = 「bogsa03.xml」> Bogsa3 \t \t <盒ID = 「4」 URL = 「bogsa04.xml」> Bogsa4 沒這並不意味着要在那裏回覆，但是是的......它仍然是最好的方法嗎？ –

帶有XML和按鈕的動態HTML5播放器

回答

相關問題