210711 비디오 플레이

그누보드 사용해서 홈페이지 제작 중인데 메인 화면의 중간에 있는 메뉴 중 클릭하면 샘플 동영상을 보여주는 게 필요해짐. 그래서 video 태그랑 약간의 css, js 를 사용해서 만들었다. 

 

HTML : 그누보드 기본 구조를 그냥 쓰고 있는데 모양이 양 사이드에 패딩이 잡혀 있다. 그래서 sample_video 부분을 콘텐츠 시작 아래 부분의 내용에 같이 넣으면 비디오 재생 화면을 화면 전체로 확대하는 게 안 되는 거 같음.

그래서 sample_video 부분을 콘텐츠 바깥에 만들었다. 메뉴 부분에 id=tag를 한 이유는 다른 메뉴들은 다 링크여서 hover 할 때 css가 이미 만들어져 있어 이 메뉴에도 같은 효과 적용을 위해 링크에 태그를 걸어서 그 위치에 비디오 재생 화면이 뜨도록 함.

<div id='sample_video'>
	<div class='close'></div>
	<video controls muted id='video_clip'>
		<source src="img/sample_video.mp4" type="video/mp4">
		<strong>Your browser does not support.</strong>
	</video>
</div>

<!-- 콘텐츠 시작 { -->
<div id="wrapper">
    <div id="container_wr"> 
    <div id="container">

		<ul id='tag'>
			<li id='play'><a href='#tag'>
				<div class='sub_banner'></div>
				<span>동영상 제작 서비스<br/>
				샘플 동영상 보기</span>
			</a></li>
		</ul>

 

CSS

#play { cursor:pointer; }
#sample_video { display:none; position:fixed; top:0; width:100%; background:rgba(0,0,0,0.9); height:100vh; z-index:1001; transition: 0.3s  }
#sample_video .close { position:absolute; top:5px; right:5px; background:url('/img/close.png') no-repeat center center; 
background-size:25px auto; width:30px; height:30px; cursor:pointer; }
#sample_video video { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; }

 

JS : sample_video 부분이 display none으로 숨겨져 있다가 메뉴에서 동영상 보기를 클릭시 바로 재생이 되도록 했다. #video_clip 이 딱 하나밖에 없는데도 [0] 을 추가해 줘야 잡힌다. 그냥 $('#video_clip').play(); 하면 오류 생김. 

<script>
	$('#play').click(function () {
		$('#sample_video').show();
		$('#video_clip')[0].play();
	});
	
	$('#sample_video .close').click(function () {
		$('#sample_video').fadeOut(300);
	});
</script>