티스토리 뷰

DEV/HTML5

Video와 Audio 태그 사용 예제

초록매실원액 2015. 11. 30. 09:22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<video src="movie.ogg"> 
Your browser is not video-enabled; 
<a href="movie.ogg">download the video</a>
and <a href="movie.txt">transcript</a> 
</video>
 
<audio src="horse.wav"> 
Your browser does not support the audio element.
<a href="horse.txt">transcript</a> 
</audio> 
 
 
------------------------------------------------- 
Video 제어 코드 샘플 
<video id="movie" width="320" height="240" preload controls> 
<source src="redplus.mp4"  type="video/mp4"  /> 
<source src="redplus.webm" type="video/webm" />
</video> 
<script>
var v= document.getElementById("movie"); 
v.onclick = function(){ 
if (v.paused){
v.play();
}else{
v.paluse();
}
} );
</script> 
 
 
-------------------------------------------------
video 태그  Full Screen
<!DOCTYPE html>
<html lang="ko">
<head>
<title>video 태그 Full Screen</title>
<meta charset="utf-8">
<script type="text/javascript">
//resize 이벤트 잡기
window.addEventListener("resize",resized,false);
 
//resized 함수
function resized(){
//video 태그 가져오기
var _vid = document.querySelector("video");
_vid.style.position ="fixed";
_vid.style.width = window.innerWidth + "px";
_vid.style.height = window.innerHeight + "px";
_vid.style.zIndex = 100;
}
</script>
</head>
<body style="background-color:#ccc;" >
<video src="Videos/video.mp4" autoplay></video>
</body>
</html> 
 
-------------------------------------------------
HTML5 AUDIO 태그 
<!DOCTYPE html>
<html lang="ko">
<head> 
<title>HTML5 audio 태그</title>
<meta charset="utf-8">
</head> 
<body>
<audio id="audio" src="Audio/sound.mp3" controls></audio>
 
<span id='play'>Play</span>
<span id='pause'>Pause</span>
<span id='mute'>Mute</span>
<span id='unmute'>Unmute</span>
 
<script type="text/javascript"> 
//play에 대한 클릭이벤트
document.getElementById("play").onclick = fuction(){
document.getElementById("audio").play(); //오디오 실행
};
document.getElementById("pause").onclick = fuction(){
document.getElementById("audio").pause(); //오디오 멈춤
};
document.getElementById("mute").onclick = fuction(){
document.getElementById("audio").volume=0; //mute
};
document.getElementById("unmute").onclick = fuction(){
document.getElementById("audio").volume=1; //unmute
};
</script> 
</body>
cs


저작자표시

'DEV > HTML5' 카테고리의 다른 글

Canvas 에 패스 그리기  (0) 2015.11.30
HTML5 canvas 태그 사용 기본 구조  (0) 2015.11.27
HTML5 기본 템플릿  (0) 2015.11.26
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함