Как преобразовать ссылку на файл mp4 в URL-объект blob?

Question

Альфред

javascript , react

Как преобразовать ссылку на файл mp4 в URL-объект blob?

Как изменить ссылку на MP4-файл в формат BLOB и вставить его в тег video с помощью JavaScript и React? У меня есть код, где я получаю запрос, но получаю undefined в консоль. Вот мой код:

```javascript
function App() {
  const [src, setSrc] = React.useState('')
  
  React.useEffect(() => {
    const fetchVideo = async () => {
      try {
        const response = await axios.get('//assets.mixkit.co/videos/preview/mixkit-white-cat-lying-among-the-grasses-seen-up-close-22732-large.mp4', { responseType: 'blob' })

        console.log(response)

        setSrc(URL.createObjectURL(response.data))
      } catch (err) {
        console.log(err)
      }
    };

    fetchVideo()
  }, [])

  console.log(src)

  return (<video src={src} controls />);
}
```

10 октября 2023 г. 10:27

Ответы на вопрос 1

Похожие вопросы

Answer 1

Ваш код выглядит правильно, однако есть несколько вещей, которые стоит проверить:

1. Убедитесь, что у вас установлена и импортирована библиотека axios.
2. Убедитесь, что ссылка на видео-файл действительна и доступна. Попробуйте открыть ссылку в браузере, чтобы убедиться, что файл существует.
3. Проверьте консольные логи для более подробной информации об ошибке. Возможно, что есть другие ошибки, кроме undefined.

Если проблема не решается, можно попробовать изменить способ получения файла. Вместо использования axios можно использовать Fetch API:

```javascript
const fetchVideo = async () => {
  try {
    const response = await fetch('//assets.mixkit.co/videos/preview/mixkit-white-cat-lying-among-the-grasses-seen-up-close-22732-large.mp4')
    const blob = await response.blob()

    setSrc(URL.createObjectURL(blob))
  } catch (err) {
    console.log(err)
  }
};
```

Или можно попробовать использовать прямое указание типа:

```javascript
setSrc(URL.createObjectURL(response.data, {type: 'video/mp4'}))
```

Проверьте эти советы и откройте консольные логи, чтобы получить более подробную информацию об ошибке, если проблема не решается.