我正在使用Firefox扩展程序,该扩展程序用于在视频元素上添加叠加层。我使用https://www.w3schools.com/html/mov_bbb.mp4作为隔离示例进行测试。但是,如果我说这样的话:
$0.outerHTML = $0.outerHTML;
在控制台中,视频停止播放并消失,仅留下阴影。请注意,我在常规网页上没有得到这种行为。我也没有在Chrome中出现这种行为。
我想添加我的UI元素,但找不到解决方法。
尚不清楚您要对视频本身进行什么样的处理。但是,我首先会尝试摆脱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
的设置进行测试,但是在您的情况下,结果可能相同。