HTML5 audio,video태그 예시 정리
- 각종정보모음/컴퓨터
- 2020. 3. 14.
| audio,video태그 | 속성 | 설명 |
| src | 음악,비디오 파일 경로 지정 | |
| preload | 음악 비디오를 준비중일때 데이터를 모두 불러올지 여부 지정 | |
| autoplay | 음악 비디오의 자동재생 여부지정 | |
| loop | 음악,비디오의 반복 여부 지정 | |
| controls | 음악,비디오 재생 도구 출력 여부 지정 |
| video태그 | 속성 | 설명 |
| width | 비디오의 너비지정 | |
| height | 비디오의 높이지정 |
음악삽입하기 예시
<body>
<audio src="kalimba.mp3" controls="controls"></audio>
</body>
웹브라우저 제약이 없도록 음악 삽입하기<!--type 속성을 입력하지 않으면 웹브라우저가 음악 파일을 다운로드 한후
재생 가능한 파일인지 확인하는 작업이 필요함으로 꼭 지정해야함--!>
<body>
<video controls="controls">
<source src="wildlife.mp4" type="video/mp4">
<source src="wildlife.webm" type="video/webm">
</body>
동영상삽입하기
<body>
<video controls="controls">
<source src="wildlife.mp4" type="video/mp4">
<source src="wildlife.webm" type="video/webm">
</body>
동영상을 불러오는 동안 다른이미지 보여주기
<!--video 태그의 poster 속성을 사용해 동영상을 불러오는 동안 사용자에게 보여 줄 이미지를 지정할 수 있음
img 태그의 src 속성처럼 이미지 경로를 입력함--!>
<body>
<video controls="controls" poster="http://placehold.it/640x360">
<source src="wildlife.mp4" type="video/mp4">
<source src="wildlife.webm" type="video/webm">
</body>
'각종정보모음 > 컴퓨터' 카테고리의 다른 글
| HTML5 공간분할태그 (8) | 2020.03.15 |
|---|---|
| HTML5 입력양식 종류 - 입력양식 태그 (7) | 2020.03.15 |
| HTML5 입력양식 종류 - 기본입력양식 태그 (21) | 2020.03.15 |
| img태그(이미지태그 사용법) (35) | 2020.03.13 |
| GET 전송방식과 POST 전송방식 차이 (78) | 2020.03.10 |
| 테이블태그(table) tr th td 속성정리 (17) | 2020.03.10 |