HTML5/CSS3 수업자료
video, audio
Audio 객체를 사용하여 HTML5에 적용하기
src : 재생하려는 음악 파일 경로
volume : 음악의 음량
currentTime : 음악의 현재 위치(초 단위)
play() : 음악을 재생합니다.
pause() : 음악을 일시 정지합니다.
<head>
<script>
function a_play_pause() {
var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
</head>
<body>
<audio src="img/media/sound1.mp3" id="myAudio"></audio>
<a href="#" onclick="a_play_pause()">재생/정지</a>
</body>
비디오 스크립트
<script>
function v_play_pause() {
var myVideo = document.getElementById("myVideo");
if (myVideo.paused) {
myVideo.play();
document.querySelector('.btn').style.backgroundPosition='0 -50px';
} else {
myVideo.pause();
document.querySelector('.btn').style.backgroundPosition='0 0px';
}
}
</script>
////////////////////////////////////////// life-en.vtt ////////////////////////////////////////
WEBVTT
NOTE
이것은 주석 부분입니다. 영어 자막.
1
00:00:00.000 --> 00:00:03.000
Hello~
2
00:00:03.000 --> 00:00:06.000
Happy~
3
00:00:07.000 --> 00:00:10.000
Good Bye
///////////////////////////////////////////////////////////////
자막 스타일 활용 사이트
http://ronallo.com/demos/webvtt-cue-settings/
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| » |
멀티미디어 활용 자료
 | 관리자 | 2019.04.02 | 457 |
| 5 |
Form 관련 이미지
| 관리자 | 2019.04.02 | 457 |
| 4 |
transform, transition 응용 예제 이미지
| 관리자 | 2019.04.02 | 429 |
| 3 |
CSS 스타일 활용 예제
| 관리자 | 2019.04.02 | 513 |
| 2 |
html 기본태그 활용 사이트
| 관리자 | 2019.04.02 | 193 |
| 1 |
기본태그 익히기에 필요한 이미지
| 관리자 | 2019.04.02 | 393 |