미디어 삽입
*HTML5에서 오디오 비디오를 삽입하는 표준태그로 플러그인이 따로 필요 없다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비디오,오디오 삽입하기</title>
</head>
<body>
<h3>비디오 플레이</h3>
<video src="bear.mp4" width="320" height="240" controls autoplay>
브라우저가 video 태그를 지원하지 않습니다.
</video><hr>
<h3>오디오 플레이</h3>
<audio src="EmbraceableYou.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.
</audio>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
1. <video> 태그
기본문법
- src : 동영상 파일의 경로(URL)
- controls : 동영상 재생 도구 표시 (브라우저별로 외관의 차이 있음)
- loop : 트랙이 끝나고 동영상 반복 여부 지정
- autoplay : 페이지가 로딩되면 동영상을 자동 저장할지 지정
- preload : 동영상 재생 전에 음악 파일을 불러올지 지정
- poster : 동영상 다운로드 중 미리 표시될 이미지 파일의 경로 지정
- muted : 동영상의 음악 출력을 중지하도록 지정(음소거 / 속성값 auto, metadata, none)
- width / height : 동영상 너비 및 높이 지정
2. <audio> 태그
기본 문법
- src : 음악 파일의 경로(URL)
- controls : 음악 재생 도구를 표시(브라우저별로 기본 외관 차이 있음)
- loop : 트랙이 끝나고 음악을 반복시킬지 지정
- qutoplay : 페이지가 로딩되자마자 음악을 자동 재생할지 지정
- preload : 음악 재생 전에 음악 파일을 모두 불러올지에 대해 지정(속성값 auto, metadata, none)
- muted : 음악 출력을 중지하도록 지정(음소거)
'화면구현' 카테고리의 다른 글
| 검색창 만들기 (0) | 2020.03.04 |
|---|---|
| 웹 폼 (0) | 2020.03.04 |
| HTML 인라인 프레임 - target 속성 (0) | 2020.03.04 |
| HTML 인라인 프레임 (0) | 2020.03.03 |
| HTML 다운로드 링크 만들기 (0) | 2020.03.03 |
rss