Question

我有一个名为m3u8channels.json

的外部文件

该文件包含如下所示的JSON数据：

{
"title" : "ABC News",
"poster" : "http://i.imgur.com/kkb9M9C.jpg",
"url" : "http://abclive.abcnews.com/i/abc_live4@136330/index_1200_av-b.m3u8"
},
{
"title" : "Airang",
"poster" : "http://i.imgur.com/bDbObLR.png"
"url" : "http://worldlive-ios.arirang.co.kr/arirang/arirangtvworldios.mp4.m3u8"
}

我想将这些数据作为数组加载到html文件中，以便输出如下：

<!--ABC News-->
<div class="flowplayer">
<video controls poster="http://i.imgur.com/kkb9M9C.jpg">
<source type="application/x-mpegurl" src="http://abclive.abcnews.com/i/abc_live4@136330/index_1200_av-b.m3u8">
</video>
</div>

对于第一个JSON对象，依此类推。我在HTML文件中创建了一个脚本，如下所示：

function myFunction(arr) {
var out = "";
var i;
for(i = 0; i<arr.length; i++) {
    out += '<div class="flowplayer">';
    out += '<video controls poster="' + arr[i].poster + '">'; 
    out += '<source type="application/x-mpegurl" src="' + arr[i].url + '">';
    out += '</video></div>';
}
document.getElementById("wrap").innerHTML = out;
}

我尝试过这样做，甚至无法在HTML中显示单个对象。我在<script src="m3u8channels.json"></script>部分中有<head>但它不起作用。什么是使这项工作最简单的方法？

Answer 1

使用jquery函数getJSON。

示例：

$.getJSON( "ajax/test.json", function( data ) {
    // do some with data
});

如何使用jquery将外部json文件加载到网页中？

1 个答案: