Question

我已经阅读了一些类似的问题，但他们并没有完全回答我的这个问题。

我正在建立一个使用Viddler视频托管的网站。在他们的嵌入代码中，您会收到一个脚本标记，如下所示：

<script src="http://www.viddler.com/tools/vidget.js?widget_type=js_list&amp;widget_width=940&amp;source=playlist&amp;user=USERNAME&amp;playlist=XXXXXXXXXXXXXXXX&amp;style=grid&amp;show_player=true&amp;player_type=simple&amp;max=12&amp;videos_per_row=6&amp;v=2.0&amp;id=XXXXXXXXXX" type="text/javascript" charset="utf-8"></script>

我已经x了我的客户ID，但我感兴趣的是动态更改的位是播放列表。

Viddler建议只使用标签式容器来容纳所有视频播放列表，但如果我不需要，我对在页面上进行大量编码感到不舒服。

我的解决方法是以某种方式使用按钮来更改脚本源或仅更改playlist=变量。

有没有人对如何实现这一点有任何想法？

Answer 1

使用jQuery，您可以load and execute JavaScript on demand。在加载脚本之前，将播放列表部分附加到脚本URL，如下所示：

<强> HTML

<a href="playlisturl" class="playlist-link">Play list A</a>
<a href="playlisturl" class="playlist-link">Play list B</a>
<a href="playlisturl" class="playlist-link">Play list C</a>

<强>的jQuery

$(".playlist-link").click(function(e){
    e.preventDefault();
    var playlist = $(this).attr("href");

    var url = 'http://www.viddler.com/tools/vidget.js' +
                  '?widget_type=js_list' +
                  '&widget_width=940' +
                  '&source=playlist' +
                  '&user=USERNAME ' +
                  '&playlist='+ playlist +
                  '&style=grid'+
                  '&show_player=true'+
                  '&player_type=simple'+
                  '&max=12'+
                  '&videos_per_row=6'+
                  '&v=2.0'+
                  '&id=XXXXXXXXXX';

    $.getScript(url, function(data, textStatus){
        alert('This is executed after your script is loaded');
    });
});

动态更改脚本标记的src

1 个答案: