동영상 재생 및 크기 조절 교육n정보/HTML 관련 정보2015. 7. 3. 10:56
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC_KR" />
<title> Exercise02-2 </title>
</head>
<body>
<video id="videoplay" controls width="850" height="480">
<source src="CinemaParadiso.mp4" type="video/mp4"></source>
<embed src="CinemaParadiso.mp4"></embed>
</video>
<br>
<!--각종 버튼 생성-->
<input type="button" value="작은화면" onclick="small();">
<input type="button" value="기본화면" onclick="normal();">
<input type="button" value="큰화면" onclick="big();">
<input type="button" value="재생/일시정지" onclick="play();">
<input type="button" value="음소거" onclick="mute();">
볼륨 : <input type="range" id="vol" min="0" max="100" value="100";>
<div id="time"></div>
<!--각종 함수 생성-->
<script type="text/javascript">
var videocontrol = document.getElementById("videoplay");
videocontrol.addEventListener("timeupdate", volumelevel, false)
videocontrol.addEventListener("timeupdate", Playtime, false)
videocontrol.addEventListener("timeupdate", PlayTime, false);
function play(){
if (videocontrol.paused) videocontrol.play();
else videocontrol.pause();
}
function big(){
videocontrol.width += 100;
videocontrol.height += 100;
}
function normal(){
videocontrol.width = 850;
videocontrol.height = 480;
}
function small(){
videocontrol.width -= 100;
videocontrol.height -= 100;
}
function mute(){
if (videocontrol.muted) videocontrol.muted=false;
else videocontrol.muted=true;
}
function volumelevel(e){
videocontrol.volume = vol.value/100;
}
function Playtime(e)
{
var timetext = "재생상태 : " + Math.floor(videocontrol.currentTime) +
"/" + Math.floor(videocontrol.duration);
document.getElementById("time").innerHTML = timetext;
}
</script>
</body>
</html>
'교육n정보 > HTML 관련 정보' 카테고리의 다른 글
파일 내용 확인 관련 (0) | 2015.07.07 |
---|---|
[HTML]HTML 특징 (0) | 2015.06.02 |
[HTML]HTML 이란 (0) | 2015.06.01 |