From a315a14939fbbd2bf51564af77e4415eaacfab4a Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Fri, 1 Nov 2024 12:52:32 +0000 Subject: [PATCH] fix: ensure video elements autoplay in safari (#14095) --- .changeset/empty-hairs-love.md | 5 +++++ .../phases/3-transform/client/visitors/RegularElement.js | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/empty-hairs-love.md diff --git a/.changeset/empty-hairs-love.md b/.changeset/empty-hairs-love.md new file mode 100644 index 000000000000..a56e6c6334af --- /dev/null +++ b/.changeset/empty-hairs-love.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure video elements autoplay in safari diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js index 6ef29b621fe6..dafe1e74ae3a 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js @@ -61,11 +61,13 @@ export function RegularElement(node, context) { const is_custom_element = is_custom_element_node(node); - if (is_custom_element) { + if (node.name === 'video' || is_custom_element) { // cloneNode is faster, but it does not instantiate the underlying class of the // custom element until the template is connected to the dom, which would // cause problems when setting properties on the custom element. // Therefore we need to use importNode instead, which doesn't have this caveat. + // Additionally, Webkit browsers need importNode for video elements for autoplay + // to work correctly. context.state.metadata.context.template_needs_import_node = true; }