修改视频元素的outerHTML而不破坏视频

Question

我正在开发一个 Firefox 扩展，用于向视频元素添加叠加层。我使用https://www.w3schools.com/html/mov_bbb.mp4作为一个单独的示例进行测试。但是，如果我说：$0.outerHTML = $0.outerHTML;在控制台中，视频停止播放并消失，只留下盒子阴影。请注意，我在常规网页上没有遇到此行为。我在 Chrome 中也没有遇到这种行为。我想添加我的 UI 元素，但我找不到解决方法。

Answer 1

目前尚不清楚您想对视频本身做什么。但是，我首先会尝试摆脱 CSS。如果您确实想撕下视频，然后将其包装在您自己的 HTML 中并将其放回原来的位置，您可以这样做：

// Get reference to the video element

const videoElement = document.getElementsByTagName('video')[0];

// Clone the element

const videoClone = videoElement.cloneNode(true);

// Create your new container

const videoContainer = document.createElement('div');

// Do what you want with the new container

const someHeading = document.createElement('h1');

someHeading.innerText = 'This is a video';

// Append stuff to the new container

videoContainer.append(someHeading);

// Append the cloned video to the new container

videoContainer.append(videoClone);

// Remove the old video

videoElement.remove();

// Append your new video container with cloned video

document.body.append(videoContainer);

<video width="320" height="240" controls>

  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

设置outerHTML只会覆盖 HTML。如果您想看到差异，您可以尝试 和 的设置innerHTML，outerHTML但就您而言，结果可能相同。