video
오디오 했으면 비디오도 해야지 ...
오디오랑 똑같다 단지 화면이 있을 뿐...
[오디오 처럼 기본 비디오 태그를 이용]
<body>
<h2>기본 비디오 태그</h2>
<!---자동재생
<video src="Media/video.mp4" controls width="300" height="300" autoplay loop>
-->
<video src="Media/video.mp4" controls width="300" height="300">
video 태그를 지원하지 않는 브라우저 입니다. <br/>
여기를 <a hrdf="Media/video.mp4"> 클릭</a>하세요
</video>
</body>기본 비디오 태그
지원하지 않는 브라우저의 경우 (source 태그 사용)
<body>
<h2>기본 audio 하위태그인 <source>태그사용</h2>
<video controls width="200" height="200">
<source src="Media/video.3gp" type="video/3gp"/>
<source src="Media/video.mp4" type="video/mp4"/>
</video>
</body>기본 audio 하위태그인 <source>태그사용
[비디오 직접 만들기]
<body>
<h2>커스텀 비디오</h2>
<div>
<video width="300" height="200" id="video" src="Media/video.mp4" hidden></video>
</div> // 숨기기 기능 추가!
<div>
<progress value="0" ></progress>
</div>
<div>
<input type="button" value="PLAY" onclick="play();"/>
<input type="button" value="PAUSE" onclick="pause();"/>
<input type="button" value="STOP" onclick="stop();"/>
<input type="range" id="volume" value="0" min="0" max="1" step="0.1" style="width:80px"/>
<span id="current"></span> / <span id="total"></span>
</div>
<script>
//비디오 객체 얻어오기
var video = document.getElementById("video");
//span객체 얻기
var currentSpan = document.getElementById("current");
var totalSpan = document.getElementById("total");
//progress객체 얻기
var progress = document.querySelector("progress");
//이번엔 볼륨 추가요 !
var volume = document.getElementById("volume");
//오디오객체에 이벤트처리
//video객체에 timeupdate이벤트 처리를 위한 리스너 부착
video.addEventListener('timeupdate',function(){
//오디오 재생시간
totalSpan.textContent = video.duration;
//현재재생
currentSpan.textContent= video.currentTime;
//진행정도 표시(최댓값 설정)
progress.max = video.duration;
//진행정도 표시
progress.value= video.currentTime;
});
//볼륨 조절
//마우스를 드래그하다 놓았을때 이벤트(change)가 발생
/* volume.onchange = function(){
consol.log('볼륨', video.volume);
};*/
//드래그시에도 이벤트(input)가 발생 !
volume.oninput = function(){
console.log('볼륨', video.volume);
video.volume = volume.value;
};
var play = function(){
video.hidden='';
video.play();
};
var pause = function(){
video.pause();
};
//역시 stop()함수 지원안함 stop효과 기능 구현!
var stop = function(){
if(video.played){
video.currentTime=0;
video.pause();
video.hidden = 'block'; //비디오 숨기기
}
};
</script>
</body>커스텀 비디오
/
'학원 > HTML5' 카테고리의 다른 글
| 11/08 38-1 [HTML] WebStorage_1(로컬 스토리지) (0) | 2022.11.08 |
|---|---|
| 10/31 32-6 [HTML] Convas (0) | 2022.10.31 |
| 10/31 32-4 [HTML] Audio (0) | 2022.10.31 |
| 10/31 32-3 [HTML] fieldSet & address (0) | 2022.10.31 |
| 10/31 32-2 [HTML] SPAN (0) | 2022.10.31 |