Question

我正在更新播放youtube视频的javascript前端的DOM对象（使用嵌入式youtube）。

现在，我希望在DOM对象更新后立即刷新页面：我更新了视频源（URL），并希望当前视频停止播放，新视频立即开始播放。

我用

document.getElementById("embed_id").src=newUrl.fetch_url;

其中：

“embed_id”：是我赋予youtube-embed对象元素的id;

src：是源网址播放的参数

newUrl.fetch_url：内部参数包含新视频的网址

目前发生的情况是，当我查看Javascript调试器时，我可以看到元素和src值已更新，但原始视频仍在播放。如何让DOM刷新以便新视频开始播放？

Answer 1

好的，你想做的是：

var embedded = document.getElementById("embed_id");
while (embedded.hasChildNodes()) {
    embedded.removeChild(embedded.firstChild);
}
//Re-run DOM insertion here.

这将删除所有embedded个孩子，以允许您重新插入嵌入新网址的YouTube。

<强>更新：

这有效地“触及”了DOM元素，应该是你正在寻找的......

var other = element.nextSibling;

if ( other ) {
  other.parentNode.removeChild(element);
  other.parentNode.insertBefore(element,other);
} else {
  other = element.parentNode;
  other.removeChild(element);
  other.appendChild(element);
}

Source

Answer 2

所以最终我没有更新，但附加了一个新元素：

var body = document.getElementById('body');
var newObject = currentObject.cloneNode(true);
newObject.childNodes[1].setAttribute('value',"http://www.youtube.com/v/"+newUrl.fetch_url+"?enablejsapi=1&version=3&autohide=1&showinfo=0?fs=1&autoplay=1");
$('body').append(newObject).hide().fadeIn(10000);

我使用childNodes [i] .setAttribute（）来到正确的位置进行更新。

正如@Myles所说，我找不到实时更新DOM的方法，但在此追加之后，我将删除旧对象。

如何在播放视频时更新嵌入youtube视频的DOM？

2 个答案: