Question

我在文档开始页面上注入了以下代码。应该监听视频元素并更改视频元素的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的代码可以在dailymotion上使用。有什么想法吗？

我只想在任何HTMLVideoElement（<video>）更改其src属性时得到通知。

为什么变异观察者不起作用？

网页通过以下方式添加视频标签：<link rel="alternate" href="https://www.dailymotion.com/services/oembed?url=https%3A%2F%2Fwww.dailymotion.com%2Fvideo%2Fx7ojouk" type="application/json+oembed" title="Surgeon Explains How to Tie Surgical Knots" data-rh="true">

并且那个href包含一个iFrame。

Answer 1

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

var observer;
var btn = document.getElementById("setsrc");
btn.addEventListener("click", () => {
  /* let v = document.getElementsByTagName("video");
    v[0].children[0].remove();
    v[1].height = "200"; */
  let vi = document.createElement("video");
  document.body.appendChild(vi);
  vi.height = "200";
});

const config = {
  attributes: true,
  childList: true,
  subtree: true
};

function checkAllVideos() {
  document.querySelectorAll('video').forEach(observeNode);
  observeNode(document.body, config);
}

function observeNode(node) {
  const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        let addedNodes = mutation.addedNodes;
        if (addedNodes && addedNodes.length) {
          addedNodes.forEach(n => {
            if (n.nodeName === "VIDEO") observeNode(n, config);
          });
        }
        console.log('A child node has been added or removed.');
      } else if (mutation.type === 'attributes') {
        console.log('The ' + mutation.attributeName + ' attribute was modified.');
      }
    }
  };

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(node, config);
}
checkAllVideos();

<div>
  <video width="400" controls id="vid">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
  </video>
  
  <video width="400" controls id="vid2">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
  </video>
</div>
<div>
  <button id="setsrc">Set</button>
</div>

突变观察者无效，但轮询有效

1 个答案: