set a default video poster if not already present

extension/core/bg/processor.js

@@ -38,6 +38,7 @@ singlefile.processor = (() => {
 		options.fontsData = message.fontsData;
 		options.stylesheetContents = message.stylesheetContents;
 		options.imageData = message.imageData;
+		options.postersData = message.postersData;
 		options.insertSingleFileComment = true;
 		options.insertFaviconLink = true;
 		options.backgroundTab = true;

extension/core/content/content-autosave.js

@@ -54,6 +54,7 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 					fontsData: docData.fontsData,
 					stylesheetContents: docData.stylesheetContents,
 					imageData: docData.imageData,
+					postersData: docData.postersData,
 					framesData,
 					url: location.href
 				});
@@ -91,6 +92,7 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 				fontsData: docData.fontsData,
 				stylesheetContents: docData.stylesheetContents,
 				imageData: docData.imageData,
+				postersData: docData.postersData,
 				framesData: this.frameTree && !options.removeFrames && frameTree.getSync(options),
 				url: location.href
 			});

lib/single-file/doc-helper.js

@@ -69,7 +69,8 @@ this.docHelper = this.docHelper || (() => {
 			canvasData: getCanvasData(doc),
 			fontsData: getFontsData(doc),
 			stylesheetContents: getStylesheetContents(doc),
-			imageData: getImageData(doc, options)
+			imageData: getImageData(doc, options),
+			postersData: getPostersData(doc)
 		};
 	}
 
@@ -180,6 +181,29 @@ this.docHelper = this.docHelper || (() => {
 		}
 	}
 
+	function getPostersData(doc) {
+		if (doc) {
+			const postersData = [];
+			doc.querySelectorAll("video").forEach(videoElement => {
+				if (videoElement.poster) {
+					postersData.push(null);
+				} else {
+					const canvasElement = doc.createElement("canvas");
+					const context = canvasElement.getContext("2d");
+					canvasElement.width = videoElement.clientWidth;
+					canvasElement.height = videoElement.clientHeight;
+					try {
+						context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
+						postersData.push(canvasElement.toDataURL("image/png", ""));
+					} catch (error) {
+						postersData.push(null);
+					}
+				}
+			});
+			return postersData;
+		}
+	}
+
 	function getFontsData() {
 		if (typeof fontFaceProxy != "undefined") {
 			return fontFaceProxy.getFontsData();

lib/single-file/frame-tree.js

@@ -91,6 +91,7 @@ this.frameTree = this.frameTree || (() => {
 				frameData.title = messageFrameData.title;
 				frameData.stylesheetContents = messageFrameData.stylesheetContents;
 				frameData.imageData = messageFrameData.imageData;
+				frameData.postersData = messageFrameData.postersData;
 				frameData.canvasData = messageFrameData.canvasData;
 				frameData.fontsData = messageFrameData.fontsData;
 				frameData.processed = messageFrameData.processed;
@@ -180,6 +181,7 @@ this.frameTree = this.frameTree || (() => {
 			title: document.title,
 			stylesheetContents: docData.stylesheetContents,
 			imageData: docData.imageData,
+			postersData: docData.postersData,
 			canvasData: docData.canvasData,
 			fontsData: docData.fontsData,
 			processed: true

lib/single-file/single-file-core.js

@@ -73,6 +73,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		sequential: [
 			{ action: "removeUIElements" },
 			{ action: "replaceStyleContents" },
+			{ option: "removeVideoSrc", action: "insertVideoPosters" },
 			{ option: "removeSrcSet", action: "removeSrcSet" },
 			{ option: "removeFrames", action: "removeFrames" },
 			{ option: "removeImports", action: "removeImports" },
@@ -136,6 +137,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				this.options.fontsData = docData.fontsData;
 				this.options.stylesheetContents = docData.stylesheetContents;
 				this.options.imageData = docData.imageData;
+				this.options.postersData = docData.postersData;
 			}
 			this.options.content = this.options.content || (this.options.doc ? DOM.serialize(this.options.doc, false) : null);
 			this.onprogress = options.onprogress || (() => { });
@@ -659,6 +661,16 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			}
 		}
 
+		insertVideoPosters() {
+			if (this.options.postersData) {
+				this.doc.querySelectorAll("video[src], video > source[src]").forEach((videoElement, videoIndex) => {
+					if (!videoElement.poster && this.options.postersData[videoIndex]) {
+						videoElement.setAttribute("poster", this.options.postersData[videoIndex]);
+					}
+				});
+			}
+		}
+
 		async pageResources() {
 			const resourcePromises = [
 				DomProcessorHelper.processAttribute(this.doc.querySelectorAll("link[href][rel*=\"icon\"]"), "href", PREFIX_DATA_URI_IMAGE, this.baseURI, this.batchRequest),