Vue.js Vite Build Error with <video><source> tags

Question

I'm working on a Vue 3 app and am trying to swap out a static image for a video and it's throwing a

[vite] Build errored out.
Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript) at error (/myapp/node_modules/rollup/dist/shared/rollup.js:5275:30)
...

This builds (not that you'd use an image but just to show):

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
     <source src="/images/my_image.png">
</video>

This does not:

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
     <source src="/images/my_movie.mov">
</video>

I'm new to Vite and am trying to understand why it seems to be wanting to import the video from the HTML tag.

Answer 1

Add poster="/images/my_image.png" to the video tag. Like this;

<video poster=“/images/my_image.png” …

Otherwise, you can't put an image into the source tag.

Answer 2

This seems like a bug (perhaps in @vue/compiler-sfc , which compiles the templates and resolves the src URLs there). I'm not sure why Vite (or the template compliler) is unable to handle the .mov extension for src , but a workaround is to bind a literal string:

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
  <!-- BEFORE -->
  <!--<source src="/images/my_movie.mov">-->

  <source :src="`/images/my_movie.mov`">
</video>