Javascript/jQuery - 更改对象数据属性不会停止在 Chrome 中播放视频

Question

我有一个如下所示的对象：

<object data="black.html" width="100%" class="vidlink vid1link"></object>

然后我使用以下代码加载 youtube 视频：

$(".vid1link").attr("data", "https://www.youtube.com/embed/MhKxm_G6FRw?autoplay=1");

这很好用。但后来我希望用户“关闭视频”。以下代码触发数据属性变为黑页：

$(".vid1link").attr('data', 'black.html');

这在 Firefox 和 IE/Edge 上运行良好。但在 chrome 上，视频继续播放。我检查了控制台中的元素，它成功地用 black.html 替换了数据，但它仍然继续播放视频，如前所述，仅在 Chrome 中。

这是一个已知的错误还是正常的 chrome 行为？

非常感谢

编辑：现在我通过向 youtube 视频发送暂停请求找到了解决方法：

将以下内容添加到 youtube 链接：enablejsapi=1

this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')

虽然 - 如果页面上有多个视频，这似乎不起作用。

Answer 1

$('.vid1link').replaceWith('<object data="black.html" width="100%" class="vidlink vid1link"></object>');

您需要在替换属性之前删除完全旧的元素

Answer 2

    document.getElementsByClassName(".vid1link").setAttribute('data', 'black.html');