Question

我正在试图弄清楚我必须做些什么来使这些链接（流）转向我的嵌入式iframe播放器。我知道链接必须看起来像这样（twitch.tv/widgets/live_embed_player.swf?channel=destructoid“）才能在播放器中工作。这里是我当前代码的链接（http://jsfiddle.net/82wNq/59/）如何编辑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）

Answer 1

您有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

Answer 2

你的意思是：

$.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

如何强制通过javascript链接到嵌入式播放器

2 个答案: