在不破坏视频的情况下修改视频元素的outerHTML

Question

我正在开发一个 Firefox 扩展，用于处理向视频元素添加叠加层。我使用 https://www.w3schools.com/html/mov_bbb.mp4 作为一个孤立的例子来测试。但是，如果我这样说：

[=10=].outerHTML = [=10=].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，但在您的情况下，结果可能相同。

在不破坏视频的情况下修改视频元素的outerHTML

Modify outerHTML of video element without destroying video

html

javascript

firefox-addon-webextensions