Vue js render video

Question

Vue js render video

Navigation

#1 by (2 votes)

1

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 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 of links and make bind with vue.js correctly?

html5 vue.js

asked by anonymous 09.11.2017 / 19:00

1 answer

Use parameter passed in function inside the map () Capture hidden value in lopping

score 2 · Accepted Answer

Try 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"}
    ]
  })
}