• HTML
  • JS

동영상 옵션 및 JAVASCRIPT 동영상 제어

2019-05-21 411

설명

  • 카카오톡 링크

동영상의 옵션과 JAVASCRIPT 로 동영상을 제어하는 소스입니다~!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )


<div class="movie">
	<video width="300" controls="controls" autoplay="autoplay">
			<source src="/movie/dengdeng.mp4" type='video/mp4' />
			<p>지원하지 않는 브라우저입니다.</p>
	</video>
</div>

<div class="table_box">
	<div class="mobile_table_view">
		<a href="javascript:;" class="none_click">
		<div class="align_middle">
			<div class="align_middle_center">
				<p>
					좌우로 움직여 주세요.
					<span>※ 한번 터치시 해당 배경은 없어집니다~!</span>
				</p>
			</div>
		</div>
		</a>
	</div>
	<div class="table_inner_box wd1280">
		<table cellpadding="0" cellspacing="0">
			<colgroup>
				<col style="width:15%" />
				<col style="width:25%" />
				<col style="width:20%" />
				<col style="width:50%" />
			</colgroup>
			<thead>
				<tr>
					<th>태그명</th>
					<th>예제</th>
					<th>값</th>
					<th>설명</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>SRC</td>
					<td>
						&lt;video src="동영상 링크" &gt;
					</td>
					<td>동영상 URL</td>
					<td>재생시키고자 하는 비디오의 URL</td>
				</tr>
				<tr>
					<td>WIDTH</td>
					<td>&lt;video width="" &gt;</td>
					<td>동영상의 X축 넓이</td>
					<td>동영상의 가로 크기를 지정</td>
				</tr>
				<tr>
					<td>HEIGHT</td>
					<td>&lt;video height="" &gt;</td>
					<td>동영상의 Y축 높이</td>
					<td>동영상의 세로 크기를 지정</td>
				</tr>
				<tr>
					<td>CONTROLS</td>
					<td>&lt;video controls="controls" &gt;</td>
					<td>동영상의 컨트롤러</td>
					<td>비디오의 기본적인 재생, 볼륨 등 제어기를 표시, controls="controls" 이런식으로 표기해도 되고, 공백으로 표기 해도 된다.</td>
				</tr>
				<tr>
					<td>MUTED</td>
					<td>&lt;video muted="muted" &gt;</td>
					<td>동영상의 음소거</td>
					<td><p class="point">웨일/오페라/엣지/익스 = video 태그중 속성 muted="muted" 를 추가하면 javascript로 play 를 시키면 정상적으로 작동<br /> ※음소거를 하지 않으면 javascript로 play 이벤트로 동영상을 재생시켜도 작동 되지 않습니다!</p></td>
				</tr>
				<tr>
					<td>POSTER</td>
					<td>&lt;video poster="이미지 주소" &gt;</td>
					<td>동영상이 재생되기전 보여지는 이미지</td>
					<td>동영상이 로드 되지않고 있을 때 보여지는 대체 이미지</td>
				</tr>
				<tr>
					<td>LOOP</td>
					<td>&lt;video loop="" &gt;</td>
					<td>동영상의 무한반복</td>
					<td>동영상이 끝나고서 다시 반복적으로 재생시키는 옵션태그</td>
				</tr>
				<tr>
					<td>AUTOPLAY</td>
					<td>&lt;video autoplay="" &gt;</td>
					<td>동영상 자동재생</td>
					<td>동영상이 로드되고, 영상이 자동재생하는 옵션태그</td>
				</tr>
				<tr>
					<td>PRELOAD</td>
					<td>&lt;video preload="" &gt;</td>
					<td>"none", "metadta", "auto"</td>
					<td>
						"none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음<br />
						"metadata": 사용자가 비디오를 필요로 하지 않을 것이지만, 기본 정보(크기, 첫 프레임, 비디오 길이, 등)는 가져온다.<br />
						"auto": 사용자가 비디오를 필요로 하고 미리 다운로드를 한다. (기본값)
					</td>
				</tr>
				<tr>
					<td colspan="4">영상제공 : 카카오톡방 떠들리셔 나*님 영상제공.</td>
				</tr>
			</tbody>

		</table>
	</div>
</div>

<h3 class="view_h3">JAVASCRIPT 원격제어</h3>

<div class="movie">
	<video width="300" controls="controls" id="movie1">
			<source src="/movie/dengdeng.mp4" type='video/mp4' />
			<p>지원하지 않는 브라우저입니다.</p>
	</video>
</div>

<div class="movie_controls">
	<input type="button" name="" id="" value="재생" title="" onclick="movie_controls('play')" />
	<input type="button" name="" id="" value="정지" title="" onclick="movie_controls('stop')" />
	<input type="button" name="" id="" value="일시정지" title=""  onclick="movie_controls('pause')" />
	<input type="button" name="" id="" value="볼륨업" title=""  onclick="movie_controls('Up')" />
	<input type="button" name="" id="" value="볼륨다운" title="" onclick="movie_controls('Down')" />
</div>


<script type="text/javascript">
	var myVideo = document.getElementById("movie1"); 
	var volume = 0.4;
	function movie_controls(value) { 
		switch(value) {
			case 'play' :
				myVideo.play();
			break;
			case 'stop' :
				myVideo.pause();
				myVideo.currentTime = 0;
			break;
			case 'pause' :
				myVideo.pause();
			break;
			case 'Up' :
				volume = volume + 0.2;
				if(volume > 1) {
					volume = 1;
				}
				myVideo.volume = volume;
			break;
			case 'Down' :
				volume = volume - 0.2;
				if(volume < 0) {
					volume = 0;
				}
				myVideo.volume = volume;
			break;
		}
	}
</script>