Видео не загружается с VueJS - PullRequest
1 голос
/ 29 мая 2020

Я работаю с Vue. js 2 и Laravel и безуспешно пытался загрузить видео из локальной папки моего проекта.

Vue -загрузчик плагин правильно установлен и добавлен в мой webpack.config. js, как указано в документах: https://vue-loader.vuejs.org/guide/#manual -setup

Я пробовал самый простой способ.

<template>
  <div>
    <video autoplay muted loop id="myVideo">
      <source src="/storage/videos/landing.mp4" type="video/mp4" />
    </video>
  </div>
</template>

Я также пробовал использовать другой подход, предложенный в другом вопросе о переполнении стека, путем динамического обновления атрибута sr c при установке компонента.

<template>
  <div>
    <video ref="videoRef" src="" autoplay muted loop id="myVideo"></video>
  </div>
</template>

<script>
export default {
  mounted: function() {
    this.$refs.videoRef.src =
      "/storage/videos/landing.mp4";
  }
};
</script>

Ни один из них

Я совершенно уверен, что проблема заключается в Vue неправильном разрешении видеомаршрута, так как я пытался использовать фиктивную ссылку на видео из Интернета, и она работает абсолютно нормально.

Firefox также дает мне некоторые подсказки.

enter image description here

Однако я не уверен, в чем проблема и как ее решить. Заранее спасибо.

PS: Я трижды проверил указанный маршрут, и он определенно существует в моем проекте.

1 Ответ

0 голосов
/ 29 мая 2020

Либо вы загружаете свое видео с помощью импорта модуля es, ваш загрузчик должен иметь возможность импортировать mp4 , и вы помещаете это в sr c

import video from 'path/to/video/a.mp4'

и в вашем компоненте вы делаете

<video :src="video">

PS убедитесь, что импортированное видео затем определено в вашей функции данных.

Или вы можете использовать его, как вы делаете с src="path/to/folder" и попытайтесь понять, на что указывает этот путь через вкладку вашей сети, и поместите видео в нужную папку на основе этого.

...