我如何強制通過JavaScript鏈接到嵌入式播放器

我想弄清楚我必須做些什麼來使這些鏈接（流）走向我的嵌入式iframe播放器。我知道鏈接必須看起來像這樣（twitch.tv/widgets/live_embed_player.swf?channel=destructoid「）才能在播放器中工作。這裏是我當前代碼的鏈接（http://jsfiddle.net/82wNq/59/）我該如何編輯的JavaScript，使其工作謝謝您的時間我如何強制通過JavaScript鏈接到嵌入式播放器

當前HTML：？！

<iframe id="player" name="frame1" type="text/html" width="100" height="100" src="" frameborder="1"></iframe> 
<div id="content" class="panel panel-default"></div> 
<div id="list"> 
    <ul name="ul1"> 
     <li class="li 1"></li> 
    </ul> 
</div>

當前JS：

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=League%20of%20Legends&limit=20&type=suggest&callback=?", function (data) { 
    var temp = ""; 

    $.each(data.streams, function (index, item) { 
     temp = temp + "<div id='list' ><li class='li 1'></li><a href=" + item._links.self + "<div id='content1' >" + item.channel.display_name + " </div></div></a>"; 
    }); 
    $("#content").html(temp); 
});

下面是API本身的鏈接，但作爲新對此，我很難理解它（https://github.com/justintv/Twitch-API/blob/master/embedding.md#embedding-streams-vods-and-chat）

來源

2014-01-10 SamK

你的意思** [這]（http://jsfiddle.net/sing0920/a5MZZ/）**？ –

您有2個選項。您可以使用錨鏈接的target屬性，但請注意目標屬性已被棄用，儘管它是supported by all major browsers。

HTML：

<iframe id="player" name="frame1" type="text/html" width="100" height="100" src="" frameborder="1"></iframe> 
<div id="content" class="panel panel-default"> 
    <div id="list"> 
     <ul class="ul1"> 
     </ul> 
    </div> 
</div>

的JavaScript：

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=League%20of%20Legends&limit=5&&type=suggest&callback=?", function (data) { 
    var temp = ""; 

    $.each(data.streams, function (index, item) { 
     temp = temp + "<li><a target='frame1' href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'>" + item.channel.display_name + "</a></li>"; 
    }); 
    $("#list ul").html(temp); 
});

jsFiddle Demo

或者使用jQuery，這被廣泛認爲是正確的方式做到這一點：

的JavaScript：

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=League%20of%20Legends&limit=5&&type=suggest&callback=?", function (data) { 
    var temp = ""; 

    $.each(data.streams, function (index, item) { 
     temp = temp + "<li><a href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'><div id='content1' >" + item.channel.display_name + " </div></a></li>"; 
    }); 
    $("#list ul").html(temp); 
}); 

$("#content").on('click', 'a', function(e) { 
    e.preventDefault(); 
    $("#player").attr('src', this.href); 
});

jsFiddle Demo

來源

2014-01-10 04:49:43 jammykam

非常感謝，這個工作！ – SamK

你的意思是這樣的：

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=League%20of%20Legends&limit=5&&type=suggest&callback=?", function (data) { 
    var temp = ""; 

    $.each(data.streams, function (index, item) { 
     console.log(item); 
     temp = temp + "<div id='list' ><li class='li 1'></li><a href='" + item.channel.url + ".swf' class='vdos'><div id='content1' >" + item.channel.display_name + " </div></div></a>"; 
    }); 
    $("#content").html(temp); 
}); 
$(document).on('click', 'a.vdos', function(evt) { 
    evt.preventDefault(); 
    var url = $(this).attr("href"); 
    alert(url); 
    $("iframe#player").attr("src", url); 
});

更新Fiddle

來源

2014-01-10 04:34:45

我如何強制通過JavaScript鏈接到嵌入式播放器

回答

相關問題