[Java] 게시판에 유튜브 동영상 썸네일 및 업로드하는 방법 (영상 有)

안녕하세요.

오늘은 프로젝트에서 게시판에 유튜브 동영상을 업로드하고 썸네일을 등록하는 방법에 대해 정리해보겠습니다! 

최근 유튜브가 엄청난 인기를 보여주면서 유뷰트 동영상을 업로드할 수 있는 게시판을 만들어 달라는 요청사항이

적지 않게 발생하곤 합니다. 앞으로 종종 사용할 것 같기에 포스팅해봅니다.

아래는 구현 화면입니다.

(동영상 대표이미지(첨부파일)을 다루면 너무 길어지기에 다루지 않았습니다.)

 

 

---

 

우선 유튜브에 들어가서 게시판에 업로드할 동영상을 들어가봅니다.

동영상에 마우스 오른쪽 클릭해서 동영상 URL 복사를 클릭하여 메모장에 붙여 넣으면 유튜브 주소가 뜨게 됩니다.

저희는 이 주소를 데이터베이스에 저장시킨다음 필요할 때 불러올 수 있도록 할 겁니다.

 

 

---

 

create.jsp (등록화면)

 

등록화면입니다.

여기서 중요한 점은 유튜브 주소 ID에서 mv_the_origin_url 컬럼에 유튜브 ID값만 집어 넣는 점입니다.

(mv_the_origin_url에 https://youtu.be/khpJk4cyVOM 이렇게 URL주소를 전부 데이터베이스 저장할 예정이지만,

사용자의 편의를 위해서 ID값만 입력하도록 설정하였습니다.)

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
 
 
<script type="text/javaScript">
 
function frm_check(){    
 
if (!confirm('등록하시겠습니까?')) {
return false;
}
}
 
</script>
 
<div class="cnt_bbs">
<form:form commandName="movieVO" name="movieVO" method="post" enctype="multipart/form-data" action="${pageContext.request.contextPath}/youtube/createAction.do" onsubmit="return frm_check();" >
 
<div class="bbs_write">
<table class="tb_write">
<caption>게시글 등록</caption>
<colgroup>
    <col style="width:25%;">
    <col style="width:75%;">
</colgroup>
<tbody>
    <tr>
        <th scope="row"><label for="mv_title"> 제목 </label></th>
        <td>  
            <input type="text" name="mv_title" id="mv_title" style="width:100%"/>
        </td>
    </tr>
    <tr>
        <th scope="row">유튜브 주소 ID</th>
        <td>  
            <div>
                <span class="line_h35">https://youtu.be/  </span>
                <input type="text" name="mv_the_origin_url" id="mv_the_origin_url" style="width:150px"/>
            </div>  
            <p class="mt_10">*ID를 정확히 입력해야 Player 및 썸네일 이미지가 정상적으로 출력이 됩니다.</p>
            <p>유튜브 주소 ID를 입력하지 않으면 기존에 등록한 썸네일 이미지로 출력이 됩니다.</p>
                
        </td>
    </tr>
    <tr>
        <th scope="row"> 영상소개 </th>
        <td>  
            <textarea name="mv_the_origin_url" cols="100" rows="5" />
        </td>
    </tr>
</tbody>
</table>
</div>    
 
<div class="mt_20 t_r">
<input type="submit" class="tb_btn blueM"  value="등록" />
<a href="${pageContext.request.contextPath}/youtube/list.do"  class="tb_btn whiteM">목록</a>
</div>
</form:form>
</div>
 
 
 
 

 

CONTROLLER - /youtube/createAction.do (등록 폼)

 

여기서는 mv_the_origin_url의 ID값을 https://youtu.be/ 와 붙여줘서 저장해줍니다. 

 

@RequestMapping("/youtube/createAction.do")
public ModelAndView createAction(final MultipartHttpServletRequest multiRequest, @ModelAttribute("movieVO") MovieVO movieVO, BindingResult bindingResult,
        Model model) throws Exception {
        
        movieVO.setMv_the_origin_url("https://youtu.be/" + movieVO.getMv_the_origin_url());
        movieService.youtubeInsert(movieVO);
       
    ModelAndView mav = new ModelAndView(returnView + "bsite/youtube/create");
    return mav;
}

 

 

반응형

 

 

list.jsp (게시판 썸네일 도출)

 

게시판 리스트화면인 이 코드에서 썸네일 도출하는 부분이 핵심입니다.

서브스트링으로 https://youtu.be/  앞부분까지 잘라준 값을 key에 담습니다.

<c:set var="key" value="${fn:substring(result.mv_the_origin_url,17,100) }" />

 

유튜브 정책에 있어,

이미지 추출 방식은 http://img.youtube.com/vi/[동영상 ID값]/[이미지형식].jpg  를 사용하고 있습니다.

 

유튜브에서 제공하는 이미지 출력 코드에 키를 담아 주면 썸네일이 출력됩니다.

<img src="https://img.youtube.com/vi/${key}/mqdefault.jpg" alt="유튜브 동영상 이미지입니다." >

 

<div class="bbs_gallery">
<ul class="gallery_con clearfix">    
<c:forEach var="result" items="${resultList}" varStatus="status">
<c:set var="goDetailUrl" value="${pageContext.request.contextPath}/youtube/detail.do?mv_code=${result.mv_code}" />
<c:set var="key" value="${fn:substring(result.mv_the_origin_url,17,100) }" />
<li>
<a href="#" onclick="location.href='${goDetailUrl }'">
    <c:choose>
        <c:when test="${not empty result.mv_the_origin_url}">
        <span class="img">
            <img src="https://img.youtube.com/vi/${key}/mqdefault.jpg" alt="유튜브 동영상 이미지입니다." >
        </span>    
        </c:when>
        <c:otherwise>
            <span class="img">
                <img src="" alt="등록된 동영상 이미지가 없습니다." class="img" />
            </span>
        </c:otherwise>
    </c:choose>        
    <span class="tt">
        <c:if test="${fn:length(result.mv_title) > 20}">
            <c:out value="${fn:substring(result.mv_title,0,20)}.." escapeXml="false" />
        </c:if> 
        <c:if test="${fn:length(result.mv_title) <= 20}">
            <c:out value="${result.mv_title}" escapeXml="false" />
        </c:if>
    </span>
</a>
</li>
</c:forEach>
<c:if test="${fn:length(resultList) == 0}">
    <li class="t_c" style="text-align:center"><c:out value="조회된 데이터가 없습니다." /></li>
</c:if>
</ul>
</div>

detail.jsp (유튜브 상세보기 화면)

 

영상 화면에서 마우스 오른쪽 클릭한 다음,  소스코드 복사를 누르고 메모장에 붙여넣기를 해보면

iframe 태그가 나타나게 됩니다. 이 태그를 상세보기 화면에서 사용할 예정입니다.

 

 

리스트에서 썸네일 뽑아낼 때와 마찬가지로 서브스트링으로 ID값만 남을 수 있도록 잘라줍니다.

그리고 iframe 태그를 붙여 넣어주고 해당 키값을 넣어주면 완성입니다. 여기서 사이즈등을 변경할 수 있습니다.

 

<div class="boardview" style="margin-bottom:10px; padding-bottom:20px;">                    
<c:set var="key" value="${fn:substring(result.mv_the_origin_url,17,100) }" />
<div class="boardviewbody" style="text-align:left">
    <iframe width="1000" height="720" src="https://www.youtube.com/embed/${key}" 
    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
</div>
</div>

 

 

 

완료화면