1. 오디오 태그 <audio> ( 시작 태그, 끝 태그 모두 사용 )
1.1 속성
1.1.1 음악 파일의 경로 지정 : src
1.1.2 음악을 재생하기 전에 데이터를 모두 불러올지 여부 지정 : preload
1.1.3 음악의 자동 재생 여부 지정 : autoplay
1.1.4 음악의 반복 여부 지정 : loop
1.1.5 음악 재생 도구 출력 여부 지정 : controls
1.2 웹 브라우저별 지원 가능 오디오 파일 형식
: 웹 브라우저 별로 지원하는 음악 파일 형식이 다 다르다.
1.2.1 source
: audio 태그의 src 대신 내부에 입력한다.
: < source src ="파일 경로.mp3" type = "audio/mp3" >
: < source src ="파일 경로.ogg" type = "audio/ogg" >
: mp3를 지원하면 mp3파일을 ogg를 지원하면 ogg파일을 사용한다.
1.2.2 type
: 안써주어도 무방하나 입력하지 않을 시
음악 파일을 다운 받은 후 재생 가능한 파일인지 확인하므로
트래픽이 낭비될 수 있다.
2. 비디오 태그 <video>
2.1 속성
2.1.1 비디오 파일의 경로 지정 : src
2.1.2 비디오 준비 중일 때 표시할 이미지의 파일 경로 지정: poster
2.1.3 비디오를 재생하기 전에 데이터를 모두 불러올지 여부 지정 : preload
2.1.4 비디오의 자동 재생 여부 지정 : autoplay
2.1.5 비디오의 반복 여부 지정 : loop
2.1.6 비디오 재생 도구 출력 여부 지정 : controls
2.1.7 비디오의 너비 지정 : width
2.1.8 비디오의 높이 지정 : height
2.2 웹 브라우저별 지원 가능 비디오 파일 형식 ( 위의 오디오와 방법 동일 )
2.3 Video.js 플러그인
: 웹 브라우저마다 표시되는 video 태그의 형태가 달라 디자인시 문제가 될 수 있다.
또한 인터넷 익스플로러 8 이하에서는 video태그가 동작 하지 않는다.
이를 Video.js를 사용해 해결 할 수 있다.
( 연습 예제로 코드 설명 )
연습 예제 1
( Video.js 플러그인 X )
플러그인을 사용하지 않았다.
실제로 크롬과 인터넷 익스플로러의 형태가 다르다.
( 왼 - 구글, 오 - 익스플로러 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title> DODAM </title> </head> <body> <audio preload="none" loop controls autoplay> <source src="background.mp3" type="audio/mp3" /> </audio> <br> <video preload="none" controls width="600" height="400" poster="poster.png"> <source src="video.mp4" type="audio/mp4" /> </video> </body> </html> | cs |
연습 예제 2
( Video.js 플러그인 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title> DODAM </title> <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> </head> <body> <audio preload="none" loop controls autoplay> <source src="background.mp3" type="audio/mp3" /> </audio> <br> <video preload="none" controls width="600" height="400" poster="poster.png" class="video-js vjs-default-skin" data-setup="{}"> <source src="video.mp4" type="audio/mp4" /> </video> </body> </html> | cs |
'웹 프로그래밍' 카테고리의 다른 글
| CSS 내부 스타일시트, 외부 스타일 시트 (1) | 2018.05.04 |
|---|---|
| HTML 입력 양식 태그 <form> <input> (0) | 2018.04.16 |
| HTML 기본 태그 (0) | 2018.04.15 |
| HTML 기본 구조와 작성법 (0) | 2018.04.13 |
| 웹의 개요와 동작 원리 (1) | 2018.04.13 |