Vue js render video

Question

I have the following component:

<div v-for="video in videos" :key="video.title">
    <video class="video-js" controls preload="auto">
        <source v-bind:src="video.src" type="video/mp4">
    </video>
</div>

script:

<script>
export default {
data: () => ({
    videos: [
      { title: "v1", src: "../../assets/videos/v1.mp4", desc: "v1"},
      { title: "v2", src: "../../assets/videos/v2.mp4", desc: "v2"}
    ]
  })
}
</script>

But the vue.js is not "converting" the video path.

When using <source src="../../assets/videos/v1.mp4" type="video/mp4"> in my html looks like this: <source src="/static/media/v1.dc6c1ef.mp4" type="video/mp4">.

How can I have a array link and do the bind with the vue.js correctly?

Answer 1

Try it like this:

import v1 from "../../assets/videos/v1.mp4";
import v2 from "../../assets/videos/v2.mp4";

export default {
data: () => ({
    videos: [
      { title: "v1", src: v1, desc: "v1"},
      { title: "v2", src: v2, desc: "v2"}
    ]
  })
}