<video>, <audio> 태그

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

<video>, <audio> 태그 본문

Front-End (웹)/HTML

<video>, <audio> 태그

친절한개발초보자 2021. 8. 19. 00:29

728x90

<video> 태그

동영상을 출력시켜주는 태그

<video src="비디오 파일 경로"></video>

옵션을 태그 자체에 적어주는 방식을 사용하고 있는 특별한 태그이다,
태그 속성
1. controls
: 재생, 일시정지, 음소거, 전체 화면, 기타 버튼들을 동영상에 출력시켜주는 옵션
(자주 사용하는 옵션은 아니기 때문에 특별한 경우를 제외하면 사용하지 않는 게 좋다)
2. autoplay
: 동영상을 자동으로 재생시켜주는 옵션
3. muted
: 음소거
★ 구글 및 웹브라우저 정책 변경으로 인해서 음소거가 되어있는 경우에만 비디오가 자동재생이 되도록 업데이트되었다. 그래서 반드시 autoplay는 muted 함께 사용을 해야지만 자동재생이 실행이 될 수 있다.
4. loop
: 동영상에 시간이 다 되었을때 다시 처음부터 반복 재생을 시켜주는 옵션
(웹사이트에서 동영상을 넣어줄 때는 보통 길이가 짧은데 loop 활용해서 자동으로 처음부터 재생시키도록 만들어주고 있다)
5. preload
: 페이지를 불러올 때 비디오 파일을 어떻게 로딩할 것인지 지정한다.
(사용할 수 있는 값은 auto, metadata, none이다. 기본값은 preload="auto"이다.)
6. poster="파일 이름"
: 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정해준다.
동영상의 크기를 조절할 때는 width,height 사용하는데 video태그 자체에 옵션을 넣어주는 방식이 아닌 css를 따로 작성을 해주는 방식이다.
★★★video태그는 가로값 세로 값을 조절할 때 width , height 둘 중에 하나만 적용이 되는 특징이 있다. 영역 자체는 늘어나지만 동영상의 크기 자체가 늘어나지는 않기 때문에 만약 길이를 조절하고 싶다면 width, height 둘 중에 하나만 넣어주는 걸 추천드립니다★★★
(특별한 경우를 제외하면 width값을 조절해서 크기를 조절하는 게 더 깔끔하다!)
동영상을 화면에 꽉채우는 디자인을 하고 싶다면 width : 100% 를 사용하면 꽉 채울 수 있다.
overflow:hidden
: 내가 선택한 대상 태그의 가로 값과 세로 값 밖으로 넘어간 html태그들을 깔끔하게 보이지 않도록 만들어주는 css속성
- video태그는 가로와 세로 값이 동시에 조절이 안되기 때문에 display:block 태그로 video태그를 감싸준 다음 감싸주고 있는 태그에 원하는 가로 값과 세로 값을 넣어주고 overflow:hidden 사용해주면 원하는 만큼만 동영상을 보여줄 수 있다.
- overflow:hidden 사용해서 동영상을 원하는 부분만큼 잘라준 경우 margin-top: + / - 값을 사용해서 동영상을 위아래로 올리고 내리고 할 수 있다.

video태그는 display:inline-block이므로 중앙정렬을 시키고 싶다면 display:block으로 변경을 해주던지 display:block태그로 감싸준다음 margin:0 auto 넣어주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>video태그</title>
    <style>
        *{margin:0;padding:0;}
           video{background-color:blue;width:100%;
                 margin-top:-200px;}
        
        div{width:100%;height:400px;overflow:hidden;}

    </style>
</head>
<body>
    <div><video src="1.mp4" autoplay muted></video></div>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>video태그#2</title>
    <style>
        *{margin:0;padding:0;}
        video{width:400px;margin:0 auto;display:block;}
        img{width:300px;margin:0 auto;}
        
        .abc:after{content:"";display:block;clear:both;}
        /*
        div{width:300px;height:300px;
            background-color:Green;margin:0 auto;}
        
        #b{background-color:blue;}*/
        
        #a{background-color:#123456;}
        
        #a div{width:200px;height:200px;
                float:left;}
        
        #a div:nth-child(1){background-color:red;}
        #a div:nth-child(2){background-color:green;}
        #a div:nth-child(3){background-color:pink;}
        
        #b{width:200px;height:200px;background-color:orange;}
    </style>
</head>
<body>
    <video src="1.mp4" autoplay muted loop></video>
    <img src="1.jpg" alt="">
    <img src="2.jpg" alt="">
    <!--<div></div>
    <div id="b"></div>-->
    
    <div id="a" class="abc">
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    <div id="b"></div>
</body>
</html>

video태그의 장단점
- 단점
1. 사용하면 웹사이트가 느려진다.
(동영상이 무거운 태그이기 때문에 스펙이 다소 낮은 기기에서는 사이트를 불러오는 속도가 기하급수적으로
느려집니다)
2. 동영상을 올려도 어차피 안 봅니다.
(애초에 사이트를 방문하는 대다수의 사람은 자기가 원하는 정보를 얻는 게 목적인데 동영상이 들어가면 기분이 나쁘다)
3. 트래픽을 많이 먹어서 사이트가 빨리 닫힐 수 있다.
- 장점
1. 디자인이 이쁘다.
2. 동영상을 짧게 만들면 많은 단점이 상쇄된다.
3. 동영상으로만 전달되는 정보
(가격대가 있는 제품)

<audio> 태그

<audio src="오디오 파일 경로"></audio>

태그 속성
1. controls
: 재생, 일시정지, 음소거, 전체 화면, 기타 버튼들을 동영상에 출력시켜주는 옵션
(자주 사용하는 옵션은 아니기 때문에 특별한 경우를 제외하면 사용하지 않는 게 좋다)
2. autoplay
: 오디오를 자동으로 재생시켜주는 옵션
3. muted
: 음소거
4. loop
: 오디오가 시간이 다 되었을 때 다시 처음부터 반복 재생을 시켜주는 옵션
(웹사이트에서 동영상을 넣어줄 때는 보통 길이가 짧은데 loop 활용해서 자동으로 처음부터 재생시키도록 만들어주고 있다)
5. preload
: 페이지를 불러올 때 오디오를 어떻게 로딩할 것인지 지정한다.
(사용할 수 있는 값은 auto, metadata, none이다. 기본값은 preload="auto"이다.)

<object>, <embed> 태그

<object> 태그
: 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용
(웹 문서 안에 다른 문서를 삽입할 때도 사용)
```
...
<object width="900" height="800" data="product.pdf"></object>
...
```
<embed> 태그
: 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 때 사용
- src 속성을 사용
```
<body>
  <embed src="medias/spring.mp3">
</body>
```