[JSP] 동영상재생페이지 만들기

2020. 12. 16. 00:56

728x90

1. JSON

* jsp파일에 JSON형식으로 웹에서 보여질 title을 정해주고, 타이틀에 해당하는 동영상파일을 불러올 경로를 지정해준다.

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
[
	{'title':'AnneMarie_2002', 'path':'http://localhost:9090/Ex_1119_Movie/movie/AnneMarie_2002.mp4'}, 	
	{'title':'AnneMarie_Problems', 'path':'http://localhost:9090/Ex_1119_Movie/movie/AnneMarie_Problems.mp4'}, 
	{'title':'AnneMarie_Birth Day', 'path':'http://localhost:9090/Ex_1119_Movie/movie/AnneMarie_Birth Day.mp4'}	
]

2. WEB.jsp

* (1) window.onload = function( ){...} 는 웹브라우저가 실행되면 가장 먼저 호출되는 메서드로 ajax형식으로 movie_list.jsp를 호출한 후 콜백메서드(result)를 실행한다.
* 콜백메서드 result가 실행되면 받아온 정보를 data 변수에 담는데, 이 변수를 eval( )에 넣으면 가상머신이 json형식으로 해석을 한다.
* createElement("option")은 <option></option>을 생성한 것과 같으며 opt.innerHTML은 <option>태그 사이에 내용을 입력해 HTML로 출력을 해준다.
* opt.value는 <option value=" ">와 같은 뜻으로 이곳에는 비디오의 경로를 담는다.
* 최종적으로 movie_select.appendChild(opt)를 사용해 <select>에 <option>을 담는다.
* (1)을 통해 웹브라우저가 실행되면서 바로 <select>에는 비디오 목록들이 담기게 됨

* (1)에서 완성된 재생목록 중 하나를 선택하면 play 메서드가 실행된다. 실행되면 path 변수에는 선택된 영상의 value값이 담긴다.(value값은 json에 의해 영상의 경로가 지정돼 있음)
* my_video.src 로 <video src="">에 비어 있는 src에 영상의 경로를 채워준다.
* my_video.play(); 에 의해 채워진 경로가 자동재생됨

//web.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		.div1 {
		 background-color: #f6f3f3;
		 border:1px solid;
		 padding:10px;
		 width : 420px;
		 height : 280px;
		}	
	</style>
	
	<script src="js/httpRequest.js"></script>
	<script type="text/javascript">		
		//웹브라우저 로드시 가장 먼저 호출되는 메서드 영역
		window.onload = function(){
			var url = "movie_list.jsp";
			sendRequest(url, null, result, "get");
		}				
		//Ajax의 요청결과를 마치고 자동으로 호출되는 콜백메서드
		function result() {
			if( xhr.readyState == 4 && xhr.status == 200 ){				
				//요청한 페이지로부터 돌아온 데이터
				var data = xhr.responseText;				
				//data를 실제 JSON형식으로 변경
				var json = eval(data); 					
				//<select>태그에 <option>태그 추가하기
				var movie_select = document.getElementById("movie_select");
				//<select id="movie_select">를 가져와서 변수에 넣어줌 				
				for( var i = 0; i < json.length; i++ ){
					//<option></option>을 생성해 변수 opt에 담는다.	
					var opt = document.createElement("option");
					//<option>타이틀</option>
					opt.innerHTML = json[i].title; 
					//<option value="영상경로"></option>
					opt.value = json[i].path;			
					//만들어진 option태그를 select태그에 추가
					movie_select.appendChild(opt);
				}				
			}
		}		
		function play(){			
			//현재 선택된 value값을 얻어온다.
			var path = document.getElementById("movie_select").value;
			var my_video = document.getElementById("my_video");
			my_video.src = path;
			my_video.play();//자동재생
		}		
	</script>	
</head>
	<body>
		<div class="div1">
			<table border = "1" align="center" style="border-collapse : collapse">
				<tr>
					<td style="background-color : #ede7e7"> 영상목록  </td>
					<td>
						<select id="movie_select" onchange="play();">
			<!--select의 option에 변화가 생기면 onchange에 있는 play()가 실행됨   -->
							<option>:::VIDEO PLAYLIST:::</option>
						</select>				
					</td>
				</tr>	
			</table>
				<hr>	
			<div align="center">
				<video src="" id="my_video" width="320" height="240" controls></video>	
			</div>		
		</div>
	</body>
</html>

728x90

저작자표시

'# WEB > Java&JSP' 카테고리의 다른 글

[JSP] JSTL_if, forEach 등 함수 쉽게 쓰기 (0)	2020.11.28
[JSP] EL표현식_JSP가독성 높히기 (0)	2020.11.26
[JSP] Update_WEB에서 DB자원 수정하기 (0)	2020.11.25
[JSP] Delete_WEB에서 DB자원 삭제하기 (0)	2020.11.23
[JSP] Create_WEB에서 DB자원 삽입하기 (0)	2020.11.21

코딩 기록