diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
index 01b62d23da..08075efee2 100644
--- a/src/generators/nodes/Attribute.ts
+++ b/src/generators/nodes/Attribute.ts
@@ -540,6 +540,7 @@ const attributeLookup = {
'textarea',
],
},
+ volume: { appliesTo: ['audio', 'video'] },
width: {
appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
},
diff --git a/src/generators/nodes/Binding.ts b/src/generators/nodes/Binding.ts
index 3ab5f79769..16bd24c0f2 100644
--- a/src/generators/nodes/Binding.ts
+++ b/src/generators/nodes/Binding.ts
@@ -73,7 +73,7 @@ export default class Binding extends Node {
);
}
- if (this.name === 'currentTime') {
+ if (this.name === 'currentTime' || this.name === 'volume') {
updateCondition = `!isNaN(${snippet})`;
initialUpdate = null;
}
@@ -267,4 +267,4 @@ function isComputed(node: Node) {
}
return false;
-}
\ No newline at end of file
+}
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 1156ebcea7..550f8d2ae7 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -139,7 +139,8 @@ export default function validateElement(
name === 'paused' ||
name === 'buffered' ||
name === 'seekable' ||
- name === 'played'
+ name === 'played' ||
+ name === 'volume'
) {
if (node.name !== 'audio' && node.name !== 'video') {
validator.error(
diff --git a/test/runtime/samples/binding-audio-currenttime-duration/_config.js b/test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
similarity index 80%
rename from test/runtime/samples/binding-audio-currenttime-duration/_config.js
rename to test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
index 793ca5d280..abb0eeaacb 100644
--- a/test/runtime/samples/binding-audio-currenttime-duration/_config.js
+++ b/test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
@@ -7,20 +7,25 @@ export default {
test ( assert, component, target, window ) {
assert.equal( component.get( 't' ), 0 );
assert.equal( component.get( 'd' ), 0 );
+ assert.equal( component.get( 'v' ), 0.5 );
assert.equal( component.get( 'paused' ), true );
const audio = target.querySelector( 'audio' );
const timeupdate = new window.Event( 'timeupdate' );
const durationchange = new window.Event( 'durationchange' );
+ const volumechange = new window.Event( 'volumechange' );
audio.currentTime = 10;
audio.duration = 20;
+ audio.volume = 0.75;
audio.dispatchEvent( timeupdate );
audio.dispatchEvent( durationchange );
+ audio.dispatchEvent( volumechange );
audio.play();
assert.equal( component.get( 't' ), 10 );
assert.equal( component.get( 'd' ), 0 ); // not 20, because read-only. Not sure how to test this!
+ assert.equal( component.get( 'v' ), 0.75 );
assert.equal( component.get( 'paused' ), true ); // ditto...
component.destroy();
}
diff --git a/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html
new file mode 100644
index 0000000000..c65c0af8b7
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html
@@ -0,0 +1,2 @@
+
diff --git a/test/runtime/samples/binding-audio-currenttime-duration/main.html b/test/runtime/samples/binding-audio-currenttime-duration/main.html
deleted file mode 100644
index dc3aac8afe..0000000000
--- a/test/runtime/samples/binding-audio-currenttime-duration/main.html
+++ /dev/null
@@ -1 +0,0 @@
-