Изменить внешний HTML видеоэлемента, не разрушая видео

Question

Я работаю над расширением Firefox, которое занимается добавлением оверлея к элементам видео. Я использую https://www.w3schools.com/html/mov_bbb.mp4 в качестве отдельного примера для тестирования. Однако, если я скажу что-то вроде:

$0.outerHTML = $0.outerHTML;

в консоли, видео перестает воспроизводиться и исчезает, оставляя только тень от окна. Обратите внимание, что я не получаю такое поведение на обычной веб-странице. Я также не вижу такого поведения в Chrome.

Я хотел бы добавить свои элементы пользовательского интерфейса, но не могу найти обходной путь.

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, если хотите увидеть разницу, но в вашем случае это, вероятно, тот же результат.