audio & video
HTML5에서는 브라우저의 플러그인 없이도 미디어 재생이 가능하다.
그리고 다음과 같이 object, embed element와는 다른 점이 있다.
재생, 일시정지 등 web browser에 자체 control이 있다.
source에 파일을 여러 개 지정할 수 있어서 web browser의 지원 format에 따라 표시할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 아무 속성없이 -->
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<audio src="sounds/moon.mp3" controls="controls">
HTML5 Audio 지원안함
</audio>
<video src="video/one.mp4" controls="controls" width="500" height="400">
HTML5 Video 지원안함
</video>
</body>
</html>
audio는 일시정지와 되감기 빨리감기 버튼을 만들어 구현
video는 video가 보여지는 창에 마우스 이벤트를 줘 재생했다 안했다를 반복하고, 화면 밑에 현재 진행되는 시간을 표시한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function toolgeMusic() {
m = document.getElementById("myMusic");
if (m.paused) {
m.play();
btn.innerHTML = "일시정지";
} else {
m.paused();
btn.innerHTML = "음악재생";
}
}
function aa() {
m.currentTime = 0;
}
function bb() {
m.currentTime += 2;
}
function cc() {
document.getElementById("t").innerHTML = this.currentTime;
}
window.onload = function() {
btn = document.getElementById("btn");
btn.addEventListener("click", toolgeMusic, false);
btn2 = document.getElementById("btn2");
btn2.addEventListener("click", aa, false);
btn3 = document.getElementById("btn3");
btn3.addEventListener("click", bb, false);
// 비디오 재생 시간 표시
v = document.getElementById("v");
v.addEventListener("timeupdate", cc, false);
}
</script>
</head>
<body>
<audio id="myMusic" controls="controls">
<source src="sounds/moon.mp3"></source>
<!-- <source src="sounds/moon.ogg"></source> -->
</audio>
<button id="btn">음악재생</button>
<button id="btn2">|<</button>
<button id="btn3">>></button>
<br/><br/>
<video id="v" controls="controls" width="500" height="400" onmouseover="this.play()"
onmouseout="this.pause()">
<source src="video/one.mp4"></source>
<!-- <source src="video/one.ogv"></source> -->
</video>
<div id="t">00:00:00</div>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] 현재 시간을 가져와 이미지 시계 나타내기 (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] drag & drop 예제 (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] canvas (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] HTML5에서 새로 지원하는 폼태그 경험하기 (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] 인터넷 브라우저 별 input type range 알아보기 (0) | 2019.05.21 |
