개요
- KMDB API collection=kmdb_new2
KMDB API GET 요청을하면 JSON 응답은 아래와 같다.
const KMDB_API_KEY = 'API_KEY';
const KMDB_BASE_URL ='https://api.koreafilm.or.kr/openapi-data2/wisenut/search_api/search_json2.jsp';
const KMDB_MOVIE_DETAILS_URL = `${KMDB_BASE_UTL}?collection=kmdb_new2&ServiceKey=${KMDB_API_KEY}&title=피자가게`;
...
{"Query":"",
"KMAQuery":"피자 가게 피자가게",
"TotalCount":1,
"Data":[{"CollName":"kmdb_new2",
"TotalCount":1,
"Count":1,
"Result":[{"DOCID":"F59613",
...
"vods":{"vod":[{"vodClass":"프레디의 피자가게 [마스코트 호러 열풍의 시작 영상]",
"vodUrl":"https://www.kmdb.or.kr/trailer/trailerPlayPop?pFileNm=MK060265_P02.mp4"
...
}]
}
...
]}
...
]}
}
...vodUrl 를 video src 속성에 넣어주면 영상이 재생될 거라고 생각했다.
<video src=`${vodUrl}` controls></video>
하지만 영상이 재생되지 않는다...
해결 방법
-
vodUrl에 적혀있는https://www.kmdb.or.kr/trailer/trailerPlayPop?pFileNm=MK060265_P02.mp4"URL로 접근해보면 영상이 재생되는 것을 볼 수 있다.
-
개발자 도구를 열어보자. 우측 마우스 클릭과 개발자 도구 단축키인 F12가 작동하지 않는다. 그렇다면 브라우저 오른쪽 상단에 위치한 더보기 ⋮ 아이콘을 클릭 > 도구 더보기 > 개발자 도구를 클릭한다.
-
코드 분석하기
... <body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'> <!-- Body START --> // 영상 재생 관련 코드 <!-- VIDEO START--> <video id="trailerVideo" src='/trailer/play/MK060265_P02.mp4' width='880' height="560" controls autoplay muted="muted" controlsList="nodownload"> 해당 브라우저는 video 태그를 지원하지 않습니다. </video> <!-- VIDEO END--> // 우측 마우스 클릭과 개발자 도구 단축키인 F12 작동 관련 코드 <!-- Script START --> <script type="text/javascript"> window.oncontextmenu = function () { event.preventDefault(); }; document.addEventListener('keydown', function(e){ // key event const keyCode = e.keyCode; // Enter key if(keyCode == 123 ){ event.preventDefault(); } }); </script> <!-- Script END --> <!-- Body END --> </body> ...영상 재생 관련 코드를 보면 video src 속성값이 api로 받은 vodUrl과 다른 것을 볼 수 있다.
https://www.kmdb.or.kr/trailer/play/MK060265_P02.mp4을 video src 속성에 넣어보니 영상이 재생된다!!!api로 받은 vodUrl의
trailerPlayPop?pFileNm=값을play/로 바꾸어서 사용하면 영상이 재생된다.
안녕하세요~ 👋, 대한민국 개발자 유호선입니다.