Javascript 变异观察员不工作，但轮询工作

我将以下代码注入到文档开始的页面中。 它应该侦听视频元素并更改视频元素的src属性

var observer;

function logStuff(node) {
    console.log(node.src);
}

function checkAllVideos() {
    document.querySelectorAll('video').forEach(function (node) {
        logStuff(node);

       node.onloadedmetadata = function() {
        logStuff(node);
       }
    });
}

function addObserver() {
    function checkNode(node) {
        if (node.constructor.name == "HTMLVideoElement") {
            logStuff(node);

            node.onloadedmetadata = function() {
                logStuff(node);
            }
        }
    }

    observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            mutation.addedNodes.forEach(function (node) {
                checkNode(node);
            });
        });
    });
    observer.observe(document, {subtree: true, childList: true, characterData: true});
}


addObserver();
checkAllVideos();

上述投票版本为：

window.setInterval(function(){
    checkAllVideos();
}, 1000);

出于某种奇怪的原因，当注入

https://dailymotion.com

，突变观察者从不工作，但轮询代码工作

如果我将突变观察者代码注入youtube的网页，它就可以正常工作。。这两个版本的代码都可以在youtube上运行，但只有轮询

setInterval

code可以在

dailymotion

上运行。你知道为什么吗

我只想在任何

HTMLVideoElement

（

）更改其

src

属性时收到通知

var observer;

function logStuff(node) {
    console.log(node.src);
}

function checkAllVideos() {
    document.querySelectorAll('video').forEach(function (node) {
        logStuff(node);

       node.onloadedmetadata = function() {
        logStuff(node);
       }
    });
}

function addObserver() {
    function checkNode(node) {
        if (node.constructor.name == "HTMLVideoElement") {
            logStuff(node);

            node.onloadedmetadata = function() {
                logStuff(node);
            }
        }
    }

    observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            mutation.addedNodes.forEach(function (node) {
                checkNode(node);
            });
        });
    });
    observer.observe(document, {subtree: true, childList: true, characterData: true});
}


addObserver();
checkAllVideos();

为什么突变观察者不起作用

网页通过以下方式添加视频标签：

---

而且

href

包含一个iFrame。

而不是观察整个文档。我已经为每个视频元素创建了一个观测者，它似乎可以工作

var观测器；
var btn=document.getElementById（“setsrc”）；
btn.addEventListener（“单击”，（）=>{
/*设v=document.getElementsByTagName（“视频”）；
v[0]。子项[0]。删除（）；
v[1]。高度=“200”*/
设vi=document.createElement（“视频”）；
文件.正文.附件（六）；
vi.height=“200”；
});
常量配置={
属性：正确，
儿童名单：是的，
子树：真
};
函数checkAllVideos（）{
document.queryselectoral（“视频”）.forEach（观察节点）；
observeNode（document.body，config）；
}
功能观察节点（节点）{
常量回调=函数（mutationsList，observer）{
for（让突变列表突变）{
if（mutation.type==='childList'）{
设addedNodes=突变。addedNodes；
if（addedNodes&&addedNodes.length）{
addedNodes.forEach（n=>{
if（n.nodeName==“VIDEO”）observeNode（n，config）；
});
}
log（'已添加或删除子节点'）；
}else if（mutation.type==='attributes'）{
log（'修改了'+mutation.attributeName+'属性'）；
}
}
};
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（回调）；
//开始观察目标节点是否存在已配置的突变
observer.observe（节点，配置）；
}
选中所有视频（）

您的浏览器不支持HTML5视频。
您的浏览器不支持HTML5视频。
设置
注意：即使我在
documentEnd
处注入它，也没有什么区别：（当您放置断点时，是否调用了对
MutationObserver
构造函数的回调？（您还可以确认src实际上已更改）回调被称为@Trace；源肯定会改变，因为它从显示广告转到另一个视频。如果回调有效，则意味着mutationObserver正在做它的工作，这是好的。那么到底是什么问题？问题是它看不到视频标记的更改。我尝试向
视频添加一个观察者来观察服务器
attributeFilter:[“src”]
没有雪茄。它似乎也不会触发视频标记。视频标记正在通过一些脚本添加和修改。这并没有解决我的问题，但它提供了我需要解决的问题。我首先观察了添加视频标记的文档。然后，我为每个视频标记添加了一个观察者，用于src属性更改。我记录了标记我不喜欢它，但它是我唯一的选择atm。此外，我不得不在文档上使用
时间间隔
来使用querySelector检查视频标签，因为出于某种原因，MutationObserver不能处理
DailyMotion的
视频标签。它是用一些奇怪的javascript
链接动态添加的无论如何，这个答案对我很有帮助。这是一种网络抓取形式，很少能提供干净（或稳定）的解决方案。但不确定你的用例是什么。@Brandon我已经更新了答案，以倾听身体的变化，看它是否有效。而且它仍然没有使用轮询。