diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index a76a01e3b4..9711e2f6da 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -534,7 +534,8 @@ export default class Element extends Node { name === 'buffered' || name === 'seekable' || name === 'played' || - name === 'volume' + name === 'volume' || + name === 'playbackRate' ) { if (this.name !== 'audio' && this.name !== 'video') { component.error(binding, { diff --git a/src/compile/render-dom/wrappers/Element/Attribute.ts b/src/compile/render-dom/wrappers/Element/Attribute.ts index c0c8327bb0..207e706fa4 100644 --- a/src/compile/render-dom/wrappers/Element/Attribute.ts +++ b/src/compile/render-dom/wrappers/Element/Attribute.ts @@ -445,6 +445,7 @@ const attribute_lookup = { ], }, volume: { applies_to: ['audio', 'video'] }, + playbackRate: { applies_to: ['audio', 'video'] }, width: { applies_to: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'], }, diff --git a/src/compile/render-dom/wrappers/Element/Binding.ts b/src/compile/render-dom/wrappers/Element/Binding.ts index f2bf82a826..828d664001 100644 --- a/src/compile/render-dom/wrappers/Element/Binding.ts +++ b/src/compile/render-dom/wrappers/Element/Binding.ts @@ -139,6 +139,7 @@ export default class BindingWrapper { break; case 'currentTime': + case 'playbackRate': case 'volume': update_conditions.push(`!isNaN(${this.snippet})`); break; diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index fa025bacbe..80a8308b93 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -83,7 +83,14 @@ const events = [ filter: (node: Element, name: string) => node.is_media_node() && name === 'volume' - } + }, + { + event_names: ['ratechange'], + filter: (node: Element, name: string) => + node.is_media_node() && + name === 'playbackRate' + }, + ]; export default class ElementWrapper extends Wrapper {