Vue: Vue cancels <video> unmute if updating DOM

[evvvritt]

Version

2.5.16

Reproduction link

https://codepen.io/evvvritt/pen/BxmOrN

Steps to reproduce

1. (Ensure browser tab is unmuted and audio is audible)
2. Click each button several times and observe the effects:
   – Toggle Mute without DOM update properly toggles mute every time
   – Toggle Mute with... both require two clicks to unmute the video

What is expected?

Toggle Mute with DOM update

What is actually happening?

Requires two calls to actually unmute the video

---

I ran into this trying to toggle a mute icon based on the mute state. I tried v-show, :class, and :data-attr changes – all have the same problem :/

[yyx990803]

Because you shouldn't be unmuting by directly manipulating the DOM. Instead you should mutate the isMuted state and let Vue do it. Vue is doing its job by making sure your DOM is in sync with your state.

[evvvritt]

Thanks @yyx990803! I should have mentioned that mutating muted attribute via state doesn't work on iOS11 – it pauses the video. By comparison, you can fluidly un/mute by targeting the

https://codepen.io/evvvritt/pen/pVpyzr

I'm trying to have custom video controls, is there an iOS compatible way to achieve this in Vue that I'm missing?

Related:

2042

New

[tetreault]

@evvvritt is right - updating mute/unmute via state works on desktop but not in ios.

[michaelpumo]

I am having this issue also.

If I bind a boolean to a muted prop of the video, it works in desktop Chrome and Firefox but not Safari or Safari on iOS.

If I try to set the video.muted = false on the video via a ref, it doesn't work. Something fishy is certainly going on here.

[yyx990803]

@michaelpumo I verified that this is due to 2.5.x queueing updates in a macrotask, which causes iOS Safari to consider the operation no longer directly triggered by the user. This should be fixed in upcoming 2.6 which reverts all updates to microtasks.