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

user_2117496 0
Viewed 929

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.

rollupjs vite vue.js
3 Answers

As pointed out by @adain, .mov files are not in the default list of asset types to exclude from the transform pipeline used in the build.

The solution is to configure assetsInclude to add .mov files to that list:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  assetsInclude: ['**/*.mov'],
  ⋮
})

An alternative workaround is to bind a literal string: (not necessary with the assetsInclude configuration above)

<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>
user_62771510

Vite seem can not resolve .mov video files. Read the document, set assetsInclude , build successed.

export default defineConfig({
  assetsInclude: ['**/*.mov'],
  ...
})
user_181499210

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.

user_172349350
Related