I have an external file called m3u8channels.json
The file contains JSON data like so:
{
"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"
}
I would like to load this data as an array into an html file so that it outputs like this:
<!--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>
For the first JSON object, and so on. I created a script in the HTML file like this:
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;
}
I've tried doing this and can't even get a single object to display in HTML. I have <script src="m3u8channels.json"></script> in the <head> section but it doesn't work. What's the simplest way to make this work?
