A new project at the company was independently selected and developed by my team. The project requirement was to build an English product showcase website. Considering that the project was relatively simple and the development cycle was not long, we ultimately decided to use the Nuxt framework for development.

The development process went fairly smoothly, but I encountered a Bug midway through that took quite a bit of time to resolve. After searching online for a long time, I could find only a very small amount of relevant information, all of it in issues in Vue's Github repository. In the end, I still could not find the cause of the problem. Of course, this may not actually be a Bug, but rather something intentionally designed into the framework itself.

Here is my approach to solving the problem. If any experts have other ideas, please share them and let me know.

Symptoms

The homepage of the product showcase website contains a full-screen video element, and the video is set to autoplay by default. In the latest versions of most modern browsers, to achieve this, the video element needs to include the autoplay attribute, as well as a muted attribute to enable muted playback by default.

As you can see, the video autoplays normally when the page is loaded for the first time, and the DOM structure at this point is identical to the code written in the Vue template.

However, after switching routes to the product page and then switching back to the homepage, a problem occurs: the muted attribute in the original video element mysteriously disappears, causing autoplay to stop working as well.

Problem Analysis

At first, I thought this was a problem with Nuxt route switching. I tested both the navigateTo() method provided by Nuxt and the $router.push() method provided by Vue Router, and the problem occurred in both cases.

<div class="flex items-center justify-center">
  <img
    class="logo h-9 w-72 cursor-pointer"
    src="/logo.png"
    @click="$router.push('/')"
  />
</div>

For the second test, I set keepalive: true for the page to implement route caching, but this still did not solve the problem. It also led to other Bugs, which I will set aside for now since I did not investigate them further.

definePageMeta({
  layout: 'full-screen',
  keepalive: true,
})

For the third test, I tried dynamically binding the muted attribute of the video element using v-bind. Neither using a value defined through ref nor directly binding :muted="true" solved the problem.

<video
  src="car.mp4"
  class="w-full h-full object-cover"
  autoplay
  loop
></video>

I began to suspect that the problem was with Nuxt, so for the fourth test I used another pure Vue project. The result was that the muted attribute was lost on the initial load, but strangely, the video could still autoplay. This peculiar problem was becoming increasingly difficult to understand.

Eventually, I found an unresolved issue in Vue's Github repository describing the same problem I had encountered.

This issue was created on October 12, 2022, and remains open to this day. It is worth mentioning that one reply below pointed out that “Vue should not actually break native browser functionality,” but this may indeed be a Bug in Vue.js.

Solution

In the end, I stopped dwelling on the cause of the problem and began preparing a solution. Since dynamically binding the attribute could not solve the problem, I could only use the most primitive approach: manipulating the DOM to trigger the element's playback event.

onMounted(() => {
  const videos = document.getElementsByTagName('video')
  Array.from(videos).forEach((video) => {
    video.play()
  })
})

After Vue finishes mounting, I use document.getElementsByTagName('video') to obtain all the video elements on the homepage and then trigger their playback events one by one. This allows the video to continue autoplaying when switching to another route and then back to the homepage.

Although this provides a simple solution to the problem, I feel that it is not the final solution. The core of the problem should still lie in the framework. I hope someone more knowledgeable can investigate it in depth and offer me some guidance.