使用 jquery 动态更改 javascript youtube 播放器的 href

Question

    <a id="bgndVideo" href="http://www.youtube.com/watch?v=mAf6zKRb1wI" 
class="movie {opacity:.8, isBgndMovie:{width:'window',mute:false}, o
ptimizeDisplay:true, showControls:true, ratio:'4/3', loop: true}">vito 
acconci theme song 1973</a>

以上是我在文档中使用的 html，用于嵌入 javascript chromeless youtube 播放器作为背景。我从http://pupunzi.com/mb.components/mb.YTPlayer/demo/demo_background.html得到代码

href控制设置为背景的视频我想用常量动态改变上面html的href。

我尝试过的：

var DATA = VideoID

$("bgndVideo").attr("href", DATA)

这没有用，也没有

document.getElementById("bgndVideo").href=DATA;

这也不起作用。有什么建议？最好在上面的示例网站上查看源代码以更好地理解我的意思，我发现很难正确地表达我的问题！

Answer 1

您无法通过更改href 来更改电影。它已经被使用过，一旦你初始化播放器，它就不再可供播放器使用。如果您在初始之前更改 URL，那么可以，但这可能不是您想要的。

看这里：

https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

$.fn.changeMovie(URL, opt)

这个方法可以让你改变指定播放器的视频，传递一个新的参数对象来设置特定的属性。

这是我对你的代码的看法

$('#bgndVideo').changeMovie('http://www.youtube.com/watch?v='+DATA, {opacity:.4, ratio:'16/9'});

不过我认为你可能想要这个：

var movies = [
  {"id":"mAf6zKRb1wI","title":"Vito Acconci theme song 1973 -- part 1"},
  {"id":"2MxhNdyADEU","title":"Vito Acconci theme song 1973 -- part 2"},
  {"id":"xOsWwpzqlZw","title":"Vito Acconci theme song 1973 -- part 3"}
]; // note no comma after the last

$(function() {
  $.each(movies,function() {
    $("#container").append('<button data-id="'+
      $(this).id+'" class="buttons">'+
      $(this).title+'</button>');
  });
  $(".buttons").on("click", function() {
    $("#bgndVideo").changeMovie("http://www.youtube.com/watch?v="+
     $(this).data("id"), {opacity:.4, ratio:"16/9"});
  });
});