get videos current src

src/single-file/processors/frame-tree/content/content-frame-tree.js

@@ -227,6 +227,7 @@ function initResponse(message) {
 				frameData.stylesheets = messageFrameData.stylesheets;
 				frameData.images = messageFrameData.images;
 				frameData.posters = messageFrameData.posters;
+				frameData.videos = messageFrameData.videos;
 				frameData.usedFonts = messageFrameData.usedFonts;
 				frameData.shadowRoots = messageFrameData.shadowRoots;
 				frameData.imports = messageFrameData.imports;
@@ -394,6 +395,7 @@ function getFrameData(document, globalThis, windowId, options) {
 		stylesheets: docData.stylesheets,
 		images: docData.images,
 		posters: docData.posters,
+		videos: docData.videos,
 		usedFonts: docData.usedFonts,
 		shadowRoots: docData.shadowRoots,
 		imports: docData.imports,

src/single-file/single-file-core.js

@@ -175,6 +175,7 @@ class Runner {
 			this.options.stylesheets = docData.stylesheets;
 			this.options.images = docData.images;
 			this.options.posters = docData.posters;
+			this.options.videos = docData.videos;
 			this.options.usedFonts = docData.usedFonts;
 			this.options.shadowRoots = docData.shadowRoots;
 			this.options.imports = docData.imports;
@@ -686,30 +687,34 @@ class Processor {
 		const LINK_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHAB8H+DhhoQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAJUExURQAAAICHi4qKioTuJAkAAAABdFJOUwBA5thmAAAAAWJLR0QCZgt8ZAAAAJJJREFUOI3t070NRCEMA2CnYAOyDyPwpHj/Va7hJ3FzV7zy3ET5JIwoAF6Jk4wzAJAkzxAYG9YRTgB+24wBgKmfrGAKTcEfAY4KRlRoIeBTgKOCERVaCPgU4Khge2GqKOBTgKOCERVaAEC/4PNcnyoSWHpjqkhwKxbcig0Q6AorXYF/+A6eIYD1lVbwG/jdA6/kA2THRAURVubcAAAAAElFTkSuQmCC";
 		const ICON_SIZE = "16px";
 		this.doc.querySelectorAll("video").forEach(videoElement => {
-			if (videoElement && videoElement.currentSrc) {
-				const linkElement = this.doc.createElement("a");
-				const imgElement = this.doc.createElement("img");
-				linkElement.href = videoElement.currentSrc;
-				linkElement.target = "_blank";
-				linkElement.style.setProperty("z-index", 2147483647, "important");
-				linkElement.style.setProperty("position", "absolute", "important");
-				linkElement.style.setProperty("top", "8px", "important");
-				linkElement.style.setProperty("right", "8px", "important");
-				linkElement.style.setProperty("width", ICON_SIZE, "important");
-				linkElement.style.setProperty("height", ICON_SIZE, "important");
-				linkElement.style.setProperty("min-width", ICON_SIZE, "important");
-				linkElement.style.setProperty("min-height", ICON_SIZE, "important");
-				linkElement.style.setProperty("max-width", ICON_SIZE, "important");
-				linkElement.style.setProperty("max-height", ICON_SIZE, "important");
-				imgElement.src = LINK_ICON;
-				imgElement.style.setProperty("width", ICON_SIZE, "important");
-				imgElement.style.setProperty("height", ICON_SIZE, "important");
-				imgElement.style.setProperty("min-width", ICON_SIZE, "important");
-				imgElement.style.setProperty("min-height", ICON_SIZE, "important");
-				imgElement.style.setProperty("max-width", ICON_SIZE, "important");
-				imgElement.style.setProperty("max-height", ICON_SIZE, "important");
-				linkElement.appendChild(imgElement);
-				videoElement.insertAdjacentElement("afterend", linkElement);
+			const attributeValue = videoElement.getAttribute(util.VIDEO_ATTRIBUTE_NAME);
+			if (attributeValue) {
+				const src = this.options.videos[Number(attributeValue)] || videoElement.src;
+				if (videoElement && src) {
+					const linkElement = this.doc.createElement("a");
+					const imgElement = this.doc.createElement("img");
+					linkElement.href = src;
+					linkElement.target = "_blank";
+					linkElement.style.setProperty("z-index", 2147483647, "important");
+					linkElement.style.setProperty("position", "absolute", "important");
+					linkElement.style.setProperty("top", "8px", "important");
+					linkElement.style.setProperty("right", "8px", "important");
+					linkElement.style.setProperty("width", ICON_SIZE, "important");
+					linkElement.style.setProperty("height", ICON_SIZE, "important");
+					linkElement.style.setProperty("min-width", ICON_SIZE, "important");
+					linkElement.style.setProperty("min-height", ICON_SIZE, "important");
+					linkElement.style.setProperty("max-width", ICON_SIZE, "important");
+					linkElement.style.setProperty("max-height", ICON_SIZE, "important");
+					imgElement.src = LINK_ICON;
+					imgElement.style.setProperty("width", ICON_SIZE, "important");
+					imgElement.style.setProperty("height", ICON_SIZE, "important");
+					imgElement.style.setProperty("min-width", ICON_SIZE, "important");
+					imgElement.style.setProperty("min-height", ICON_SIZE, "important");
+					imgElement.style.setProperty("max-width", ICON_SIZE, "important");
+					imgElement.style.setProperty("max-height", ICON_SIZE, "important");
+					linkElement.appendChild(imgElement);
+					videoElement.insertAdjacentElement("afterend", linkElement);
+				}
 			}
 		});
 	}
@@ -1088,6 +1093,7 @@ class Processor {
 				options.stylesheets = frameData.stylesheets;
 				options.images = frameData.images;
 				options.posters = frameData.posters;
+				options.videos = frameData.videos;
 				options.usedFonts = frameData.usedFonts;
 				options.shadowRoots = frameData.shadowRoots;
 				options.imports = frameData.imports;

src/single-file/single-file-helper.js

@@ -37,6 +37,7 @@ const SHADOW_ROOT_ATTRIBUTE_NAME = "data-single-file-shadow-root-element";
 const WIN_ID_ATTRIBUTE_NAME = "data-single-file-win-id";
 const IMAGE_ATTRIBUTE_NAME = "data-single-file-image";
 const POSTER_ATTRIBUTE_NAME = "data-single-file-poster";
+const VIDEO_ATTRIBUTE_NAME = "data-single-file-video";
 const CANVAS_ATTRIBUTE_NAME = "data-single-file-canvas";
 const HTML_IMPORT_ATTRIBUTE_NAME = "data-single-file-import";
 const STYLE_ATTRIBUTE_NAME = "data-single-file-movable-style";
@@ -83,6 +84,7 @@ export {
 	HIDDEN_FRAME_ATTRIBUTE_NAME,
 	IMAGE_ATTRIBUTE_NAME,
 	POSTER_ATTRIBUTE_NAME,
+	VIDEO_ATTRIBUTE_NAME,
 	CANVAS_ATTRIBUTE_NAME,
 	INPUT_VALUE_ATTRIBUTE_NAME,
 	SHADOW_ROOT_ATTRIBUTE_NAME,
@@ -148,6 +150,7 @@ function preProcessDoc(doc, win, options) {
 			canvases: [],
 			images: [],
 			posters: [],
+			videos: [],
 			usedFonts: [],
 			shadowRoots: [],
 			imports: [],
@@ -160,6 +163,7 @@ function preProcessDoc(doc, win, options) {
 		stylesheets: getStylesheetsData(doc),
 		images: elementsInfo.images,
 		posters: elementsInfo.posters,
+		videos: elementsInfo.videos,
 		usedFonts: Array.from(elementsInfo.usedFonts.values()),
 		shadowRoots: elementsInfo.shadowRoots,
 		imports: elementsInfo.imports,
@@ -168,7 +172,7 @@ function preProcessDoc(doc, win, options) {
 	};
 }
 
-function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], shadowRoots: [], imports: [], markedElements: [] }, ascendantHidden) {
+function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], videos: [], shadowRoots: [], imports: [], markedElements: [] }, ascendantHidden) {
 	const elements = Array.from(element.childNodes).filter(node => (node instanceof win.HTMLElement) || (node instanceof win.SVGElement));
 	elements.forEach(element => {
 		let elementHidden, elementKept, computedStyle;
@@ -270,6 +274,10 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 		}
 	}
 	if (element.tagName == "VIDEO") {
+		if (element.currentSrc) {
+			data.videos.push(element.currentSrc);
+			element.setAttribute(VIDEO_ATTRIBUTE_NAME, data.videos.length - 1);
+		}
 		if (!element.poster) {
 			const canvasElement = doc.createElement("canvas");
 			const context = canvasElement.getContext("2d");
@@ -391,7 +399,7 @@ function postProcessDoc(doc, markedElements) {
 		doc.head.querySelectorAll("*:not(base):not(link):not(meta):not(noscript):not(script):not(style):not(template):not(title)").forEach(element => element.removeAttribute("hidden"));
 	}
 	if (!markedElements) {
-		const singleFileAttributes = [REMOVED_CONTENT_ATTRIBUTE_NAME, HIDDEN_FRAME_ATTRIBUTE_NAME, HIDDEN_CONTENT_ATTRIBUTE_NAME, PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, IMAGE_ATTRIBUTE_NAME, POSTER_ATTRIBUTE_NAME, CANVAS_ATTRIBUTE_NAME, INPUT_VALUE_ATTRIBUTE_NAME, SHADOW_ROOT_ATTRIBUTE_NAME, HTML_IMPORT_ATTRIBUTE_NAME, STYLESHEET_ATTRIBUTE_NAME, ASYNC_SCRIPT_ATTRIBUTE_NAME];
+		const singleFileAttributes = [REMOVED_CONTENT_ATTRIBUTE_NAME, HIDDEN_FRAME_ATTRIBUTE_NAME, HIDDEN_CONTENT_ATTRIBUTE_NAME, PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, IMAGE_ATTRIBUTE_NAME, POSTER_ATTRIBUTE_NAME, VIDEO_ATTRIBUTE_NAME, CANVAS_ATTRIBUTE_NAME, INPUT_VALUE_ATTRIBUTE_NAME, SHADOW_ROOT_ATTRIBUTE_NAME, HTML_IMPORT_ATTRIBUTE_NAME, STYLESHEET_ATTRIBUTE_NAME, ASYNC_SCRIPT_ATTRIBUTE_NAME];
 		markedElements = doc.querySelectorAll(singleFileAttributes.map(name => "[" + name + "]").join(","));
 	}
 	markedElements.forEach(element => {
@@ -402,6 +410,7 @@ function postProcessDoc(doc, markedElements) {
 		element.removeAttribute(PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME);
 		element.removeAttribute(IMAGE_ATTRIBUTE_NAME);
 		element.removeAttribute(POSTER_ATTRIBUTE_NAME);
+		element.removeAttribute(VIDEO_ATTRIBUTE_NAME);
 		element.removeAttribute(CANVAS_ATTRIBUTE_NAME);
 		element.removeAttribute(INPUT_VALUE_ATTRIBUTE_NAME);
 		element.removeAttribute(SHADOW_ROOT_ATTRIBUTE_NAME);

src/single-file/single-file-util.js

@@ -174,6 +174,7 @@ function getInstance(utilOptions) {
 		HIDDEN_FRAME_ATTRIBUTE_NAME: helper.HIDDEN_FRAME_ATTRIBUTE_NAME,
 		IMAGE_ATTRIBUTE_NAME: helper.IMAGE_ATTRIBUTE_NAME,
 		POSTER_ATTRIBUTE_NAME: helper.POSTER_ATTRIBUTE_NAME,
+		VIDEO_ATTRIBUTE_NAME: helper.VIDEO_ATTRIBUTE_NAME,
 		CANVAS_ATTRIBUTE_NAME: helper.CANVAS_ATTRIBUTE_NAME,
 		HTML_IMPORT_ATTRIBUTE_NAME: helper.HTML_IMPORT_ATTRIBUTE_NAME,
 		STYLE_ATTRIBUTE_NAME: helper.STYLE_ATTRIBUTE_NAME,