Я создаю веб-приложение AngularJS и в данный момент создаю форму, позволяющую пользователю размещать ссылки на видео на YouTube. У меня есть миниатюра, связанная с видео на YouTube, и когда пользователь вводит ссылку на YouTube, я извлекаю изображение из <code>https://img.youtube.com/vi/${videoId}/maxresdefault.jpg
Это входит в это:
<img src="{{element.video.thumb}}>
Итак, мое текущее решение:
element.video.thumb = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
Моя проблема в том, что не у всех видео на YouTube по этой ссылке доступен эскиз. Я хочу быть в состоянии определить, есть ли у видео это доступно или нет. Я замечаю, что я получаю ответ 404 в моей консоли, когда миниатюра недоступна. Поэтому я попытался проверить, существует ли миниатюра с помощью службы $ http. Я попробовал оба варианта ниже:
$http.get(`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`)
$http.jsonp(`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,{jsonpCallbackparam: "callback"})
Первый дает мне ошибку CORS, а второй не работает, потому что MIME-тип ответа - image/jpeg и выдает ошибку при попытке выполнить обратный вызов.
Мой первый вопрос:
Почему назначение ссылки на атрибут src img извлекает ресурс без проблем, но попытка доступа к ресурсу с помощью ах HTTP-запроса дает ошибку CORS?
Мой второй вопрос:
Как я могу выполнить некоторый код, если я получаю ответ 404 после назначения атрибута img src?