1

Tenho o seguinte componente:

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

Porém o vue.js não está "convertendo" o caminho do video.

Ao usar <source src="../../assets/videos/v1.mp4" type="video/mp4"> no meu html fica assim: <source src="/static/media/v1.dc6c1ef.mp4" type="video/mp4">.

Como posso ter um array de links e fazer o bind com o vue.js corretamente?

1 Resposta 1

2

Tente assim:

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"}
    ]
  })
}
2
  • Perfeito!! funcionou.. teria com importar vários videos usando um import só?
    – MeuChapeu
    9/11/2017 às 18:24
  • 1
    Não sei, acho que não. Em um loop, acho que você pode usar requires. Até o import talvez funcione em loop, nunca tentei.
    – bfavaretto
    9/11/2017 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .