Показать изображение или изображение из укороченного URL

Question

Как правильно отображать укороченный URL-адрес, который может содержать видео или файл изображения? URL-адрес не содержит расширение, и домен может иметь разное происхождение. Мне нужно использовать тег видео или изображения в зависимости от типа источника, чтобы он отображался корректно браузером. Решение может быть с JavaScript или разметкой.

Пример:
[IMAGE] http://bit.ly/1uI7Ddj
[ВИДЕО] http://bit.ly/1vvkYJ1

Я попытался следующие, но он не работает, как ожидалось:

<video width="300" height="150" src="http://bit.ly/1uI7Ddj"> 
    <img width="300" height="150" src="http://bit.ly/1uI7Ddj" alt="Fallback if video is not playing" /> 
</video> 

Answer 1

Это невозможно, если вы не являетесь владельцем домена где вы хотите сократить URL. Например, для этого вам нужно будет иметь (или иметь доступ к) сайт bit.ly.

bit.ly не размещает ваше видео или изображение, оно только перенаправляет их на реальный URL-адрес при нажатии на ссылку.

Исходный код с вашего bit.ly можно найти здесь, на хроме: вид-источник: HTTP: //bit.ly/1uI7Ddj

Вы увидите, что ваше изображение не в коде. Он перенаправляет только страницу, содержащую ваше изображение.

Answer 2

Чтобы получить полный URL-адрес от bit.ly, вам необходимо зарегистрироваться для API-разработчика и create an app, чем вы можете использовать expand method.

Для goo.gl ссылки короткие, заходят с учетной записью Google и регистрируются в API и используют expand method.

Но лучше в вашем случае будет longurl.org API, который имеет простой способ расширить URL. Взгляните на их expand-url documentation.

Пример Запрос их API:

GET http://api.longurl.org/v2/services&format=json 

и так как вы не хотите использовать PHP, чем вам нужно задать для формата JSONP так:

GET http://api.longurl.org/v2/services&format=json&callback=foo&user-agent=Application-Name%2F3.7 

Так, ALLtogether, вы должны расширить URL и получить JSon таким образом:

GET http://api.longurl.org/v2/expand?url=http%3A%2F%2Fbit.ly%2F1uI7Ddj&format=json&callback=foo&user-agent=Application-Name%2F3.7 

вы получите ответ:

foo({"long-url":"http:\/\/flark.it\/f\/i\/1884680242.WP_000008.jpg"}) 

Похожие с jsonp, read more about jsonp

Существует также expandURL API, но я не вижу, что они предлагают JSONP ответы.Пример был бы:

GET http://expandurl.appspot.com/expand?url=http%3A%2F%2Fbit.ly%2F1uI7Ddj 

и вы получите JSon ответ:

{ 
    "status": "OK", 
    "end_url": "http://flark.it/f/i/1884680242.WP_000008.jpg", 
    "redirects": 1, 
    "urls": ["http://bit.ly/1uI7Ddj", 
    "http://flark.it/f/i/1884680242.WP_000008.jpg"], 
    "start_url": "http://bit.ly/1uI7Ddj" 
}