예제 2-25. <video> 태그로 비디오 삽입, <source> 태그
WEB/HTML5-CONCEPT 2017. 11. 4. 18:39 |<video> 태그와 <source> 태그
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <video src="비디오 파일의 URL" width="비디오 재생 영역의 폭" height="비디오 재생 영역의 높이" controls // 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력 autoplay // 이 속성이 설정되면 비디오 로딩 즉시 재생 muted // 오디오를 끌 때 가용 loop> // 이 속성이 설정되면 반복 재생 </video> <source src="비디오 파일의 URL" type="비디오의 마임 타입"> 비디오 - 마임 타입(MIME Type) MP4 - video/mp4 WebM - video/webm ogg - video/ogg | cs |
1 2 3 4 5 | <video width="320" height="240" controls autoplay> <source src="bear.mp4" type="video/mp4"> <source src="bear.ogg" type="video/ogg"> 브라우저가 video 태그를 지원하지 않습니다. </video> | cs |
* 브라우저가 bear.mp4를 재생 할 수 없으면 bear.ogg를 재생한다.
예제 2-25
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>비디오 삽입</title> </head> <body> <h3>비디오 삽입</h3> <hr> <video src="media/bear.mp4" width="320" height="240" controls autoplay> 브라우저가 video 태그를 지원하지 않습니다. </video> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 3-1. 구조화된 HTML5 문서 작성 (0) | 2017.11.04 |
|---|---|
| 예제 2-26. <audio> 태그로 오디오 삽입, <source> 태그 (0) | 2017.11.04 |
| 예제 2-24. target 속성으로 프레임 윈도우 활용 (0) | 2017.11.04 |
| 예제 2-22. 2개의 인라인 프레임을 가진 웹 페이지. 예제 2-23. <iframe>으로 2개의 신문 사이트 출력하기 (0) | 2017.11.04 |
| 예제 2-21. 파일 다운로드 링크 만들기 (0) | 2017.11.04 |