No caso acima, não se deve informar o src
dessa forma "../../assets/video/first-video.mp4"
, porque no final, não é este caminho que o VueJS usa para servir os arquivos estáticos.
Por exemplo, em um projeto meu, eu tenho um arquivo .png
dentro de assets
, mas se eu inspecionar o HTML da página, a imagem está sendo servida de outro diretório, no meu caso, o src
dela é /img/gmblogoatual.4caa3f41.png
. Veja que começa por /img
e não /assets
ou ../../assets
, enfim.
Como você quer gerar um elemento HTML através de uma string, primeiro temos que importar o arquivo que será referenciado no src
.
Como fazemos isso?
Usando o require('...')
para importar o arquivo dentro de assets
.
No seu código, faremos o seguinte:
- Após
videoPlaying
, vamos declarar uma variável chamada videoUrl
que vai fazer o import do arquivo de vídeo e receber o link (path ou caminho) relativo ao arquivo de vídeo. Na função data
:
return {
videoPlaying: "", // ↓↓↓↓↓↓↓↓↓ aquele seu caminho fica no "require"
videoUrl: require("../../assets/video/first-video.mp4"),
};
- Vamos trabalhar com a função
getPlayersInfo
. Vou usar template string para facilitar a leitura. Onde você usava src="../../assets/video/first-video.mp4"
, vamos fazer dessa forma:
async getPlayersInfo() {
const videoWidth = 500;
const videoHeight = 300;
this.videoPlaying =
`<video width="${videoWidth}" controls height="${videoHeight}" autoplay src="${this.videoUrl}"></video>`;
},
Veja que agora em src
eu passei o valor do this.videoUrl
. Esta variável é que vai ser responsável por resolver (graças ao VueJS) o caminho que deve ser usado para servir o arquivo de vídeo.
Creio que não precise mudar mais nada no seu código. Veja como ficaria:
<template>
<div class="media" v-html="videoPlaying"></div>
</template>
<script>
export default {
data() {
return {
videoPlaying: '', // ↓↓↓↓↓↓↓↓↓ aquele seu caminho fica no "require"
videoUrl: require('../../assets/video/first-video.mp4')
};
},
async mounted() {
await this.getPlayersInfo(); // retirei o console.log
},
methods: {
async getPlayersInfo() {
const videoWidth = 500;
const videoHeight = 300;
this.videoPlaying = `<video width="${videoWidth}" controls height="${videoHeight}" autoplay src="${this.videoUrl}"></video>`;
}
}
};
</script>
Após os testes arqui, recriando as condições do seu código, esse foi o meu resultado ao inspecionar o HTML final da página:

Repare que mesmo importanto de assets
, o caminho final foi para src="/media/first-video.9684e373.mp4"
, pois o VueJS gera outras pastas e salva os arquivos nelas para servir na build final.
Repare também que ele gerou um id
único para o arquivo estático servido (first-video.9684e373.mp4
).
Atenção
Use a diretiva v-html
com cautela. Use-a apenas com conteúdos controlados e gerenciados por você, pois se for depender de um conteúdo desconhecido, pode gerar sérios problemas e brechas para ataques XSS, como descrito e alertado pela própria documentação:
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks (opens new window). Only use v-html on trusted content and never on user-provided content.
const
– Cmte Cardeal 17/02 às 19:00