javascript vimeo thumbnail (자바스크립트로 비메오 썸네일 가져오기)
이번에는 vimeo(비메오) 썸네일 가져오기이다.
비메오는 json를 통해서 불러온다.
html (bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo Thumbnail</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 class="text-center text-info m-5">Vimeo Thumbnail</h1>
<hr />
<div class="form-group mt-5">
<label for="vimeoId">Vimeo URL</label>
<input type="text" class="form-control m-3 vimeo-url" />
<input type="text" class="form-control m-3 vimeo-url" />
<input type="text" class="form-control m-3 vimeo-url" />
<input type="text" class="form-control m-3 vimeo-url" />
<input type="text" class="form-control m-3 vimeo-url" />
<button class="btn btn-primary btn-block mt-3" id="getBtn">Get Thumbnail</button>
</div>
<div class="thumbnail-wrap">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
js
const getButton = document.querySelector("#getBtn");
const youtubeUrl = document.querySelectorAll(".vimeo-url");
const thumbnailWrap = document.querySelector(".thumbnail-wrap");
let thumArr = [];
getButton.addEventListener('click', getThum);
function getThum() {
youtubeUrl.forEach(url => {
if (url.value !== "") {
let replaceUrl = url.value;
let finUrl = '';
let xhr = new XMLHttpRequest();
replaceUrl = replaceUrl.replace("https://vimeo.com/", '');
replaceUrl = replaceUrl.replace("https://player.vimeo.com/video/", '');
replaceUrl = replaceUrl.replace("?autoplay=", '&');
finUrl = replaceUrl.split('&')[0];
xhr.open('GET', `https://vimeo.com/api/v2/video/${finUrl}.json`);
xhr.send();
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
let vimeoThumb = JSON.parse(xhr.response)[0].thumbnail_large;
let thumbUrl = vimeoThumb;
thumArr.push(thumbUrl);
} else {
console.log('The request failed!');
}
};
}
});
thumArr.forEach(thum => {
let img = document.createElement("img");
img.setAttribute("src", `${thum}`)
thumbnailWrap.appendChild(img);
});
};
css
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@200,400&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
margin: 0;
}
img {
width: 100%;
margin: 30px 0;
}
'ETC > Sample' 카테고리의 다른 글
| javascript snow (눈내리는 효과) (0) | 2021.04.16 |
|---|---|
| javascript metronome (자바스크립트 메트로놈) (0) | 2021.04.14 |
| javascript youtube thumbnail (자바스크립트로 유튜브 썸네일 가져오기) (0) | 2021.04.11 |
| javascript < > 를 < >로 변환 (0) | 2021.03.05 |
| javascript todo list (0) | 2021.01.05 |