Enable autoplay in webviews (microsoft#165784)

For microsoft#134514

This PR allows autoplaying of audio/videos in webviews. However it disables autoplaying of non-muted audio/video without user interaction by setting `autoplayPolicy` in electron. Browsers automatically follow the same behavior

Author: mjbvz

src/vs/base/browser/markdownRenderer.ts

@@ -360,6 +360,7 @@ function sanitizeRenderedMarkdown(
 
 export const allowedMarkdownAttr = [
 	'align',
+	'autoplay',
 	'alt',
 	'class',
 	'controls',

src/vs/platform/windows/electron-main/windowImpl.ts

@@ -221,6 +221,7 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 					enableWebSQL: false,
 					spellcheck: false,
 					zoomFactor: zoomLevelToZoomFactor(windowSettings?.zoomLevel),
+					autoplayPolicy: 'user-gesture-required',
 					// Enable experimental css highlight api https://chromestatus.com/feature/5436441440026624
 					// Refs https://github.com/microsoft/vscode/issues/140098
 					enableBlinkFeatures: 'HighlightAPI',

src/vs/workbench/contrib/webview/browser/pre/index-no-csp.html

@@ -956,7 +956,7 @@
 				}
 				newFrame.setAttribute('sandbox', Array.from(sandboxRules).join(' '));
 
-				const allowRules = ['cross-origin-isolated;'];
+				const allowRules = ['cross-origin-isolated;', 'autoplay'];
 				if (!isFirefox && options.allowScripts) {
 					allowRules.push('clipboard-read;', 'clipboard-write;');
 				}

src/vs/workbench/contrib/webview/browser/pre/index.html

@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 
 	<meta http-equiv="Content-Security-Policy"
-		content="default-src 'none'; script-src 'sha256-jFyDxjOb3XBdk72ii0ggD0YVP/0gCVB58U2Vw6T/7/U=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">
+		content="default-src 'none'; script-src 'sha256-6s2fEapj0jmA7ZDjzz23Uv4xLlM7KX3p9DYidJX7Zmk=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">
 
 	<!-- Disable pinch zooming -->
 	<meta name="viewport"
@@ -957,7 +957,7 @@
 				}
 				newFrame.setAttribute('sandbox', Array.from(sandboxRules).join(' '));
 
-				const allowRules = ['cross-origin-isolated;'];
+				const allowRules = ['cross-origin-isolated;', 'autoplay;'];
 				if (!isFirefox && options.allowScripts) {
 					allowRules.push('clipboard-read;', 'clipboard-write;');
 				}

src/vs/workbench/contrib/webview/browser/webviewElement.ts

@@ -450,12 +450,11 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 		element.className = `webview ${options.customClasses || ''}`;
 		element.sandbox.add('allow-scripts', 'allow-same-origin', 'allow-forms', 'allow-pointer-lock', 'allow-downloads');
 
-		const allowRules = ['cross-origin-isolated;'];
+		const allowRules = ['cross-origin-isolated', 'autoplay'];
 		if (!isFirefox) {
-			allowRules.push('clipboard-read;', 'clipboard-write;');
-			element.setAttribute('allow', 'clipboard-read; clipboard-write; cross-origin-isolated;');
+			allowRules.push('clipboard-read', 'clipboard-write');
 		}
-		element.setAttribute('allow', allowRules.join(' '));
+		element.setAttribute('allow', allowRules.join('; '));
 
 		element.style.border = 'none';
 		element.style.width = '100%';