[html] 멀티미디어 파일 - audio / video

https://www.gettyimagesbank.com/?utm_source=google&utm_medium=gsa&utm_campaign=GSA_%EC%9E%90%EC%82%AC%EB%AA%85&utm_content=GIB_%ED%82%A4%EC%9B%8C%EB%93%9C&utm_term=%7Bkeyword%7D&ACE_REF=adwords_g&ACE_KW=%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%B1%85%ED%81%AC&gad_source=1&gclid=Cj0KCQjwvb-zBhCmARIsAAfUI2u03lowS_E85KEgjF5-dVfFU-cYEAWV7_bVvPQ5TGxhk7CLp82XcIMaAq3mEALw_wcB

게티이미지뱅크 - 사진, 일러스트, 그래픽이미지, 파워포인트, 동영상

https://www.iclickart.co.kr/?gcl_keyword=%EC%95%84%EC%9D%B4%ED%81%B4%EB%A6%AD%EC%95%84%ED%8A%B8&gcl_network=g&gad_source=1&gclid=Cj0KCQjwvb-zBhCmARIsAAfUI2s3pRhYqJsJBVh24w17f-ChfuaXnGlkfFqijtRml5-fRfmYNGa1XXIaAmm0EALw_wcB

무제한 이미지소스 X 아이클릭아트

 

https://www.pexels.com/ko-kr/

---

☆ w3c : world wide web 컨소시엄의 약자로 웹 기술의 표준을 정의하는 공식기관이다. www

---

멀티 미디어 파일 

(inline-block 속성)
  
이미지, 동영상, 오디오 등의 파일들을 말한다.
인터넷 초기에는 동영상이나 오디오를 확인하기 위해 pc를 통해서만 멀티미디어 파일들을 확인할 수 있었다. 그래서 웹 초기때에는 ActiveX를 설치해야만 파일들을 확인 할 수 있었는데
바이러스 등 여러 문제가 발생하여 w3c에서 웹표준 태그로 멀티미디어 태그를 정의했다. 

    1. <audio> 태그 

오디오를 재생해주는 태그. 브라우저마다 지원이 되는 게 있고 안되는 게 있기때문에

'이 음원은 해당 브라우저에서 지원하지 않습니다.' 문장을 태그 안에 적어준다.

그래서 브라우저에서 지원안되면 이 문구가 뜨게 된다. 
    [기본형]
    <audio src="경로" 속성></audio>

    <audio src="경로" 속성>이 음원은 해당 브라우저에서 지원하지 않습니다.</audio>

  [속성 종류]
    같이 쓸 수 있다. 
    - autoplay : 오디오를 자동 재생함.
    - controls : 오디오 컨트롤바 ☆필수로 들어가야한다. 
    - muted : 음소거
    - prelood : 재생버튼을 눌러 재생하기 전에 오디오 파일을 다운로드하여 준비함.
    - loop : 반복재생 

    - type : 웹브라우저가 해당 미디어 파일을 재생할 수 있는지 확인하도록 미디어 파일의 유형을 알려주는 속성.              type="video/mp4" 필수로 써줘야한다. 쓰면 브라우저가 확장자 헷갈리지않고 바로 출력해준다. 

controls

2. <video> 태그 

비디오를 재생해주는 태그. 
<video src="경로" 속성></video>

<video src="경로" 속성>이 영상은 해당 브라우저에서 지원하지 않습니다.</video>

[속성 종류]
같이 쓸 수 있다.

- autoplay : 오디오를 자동 재생함. 동영상을 자동 재생하려면 muted 속성이 함께 쓰여야한다.  
- controls : 오디오 컨트롤바 ☆필수로 들어가야한다. 
- muted : 음소거
- prelood : 재생버튼을 눌러 재생하기 전에 오디오 파일을 다운로드하여 준비함.

(만약 속성명 prelood만 쓰면 자동으로 auto값으로 설정된다. 

        > prelood안의 속성들 <
      ＊none : 미디어 파일을 미리 다운로드 하지 않고 사용자가 재생 버튼을 누르면 다운로드함
      ＊metadata : 미디어 파일 전체를 다운로드 하지 않고 메타 정보만 다운로드함. ☆제일 많이 씀
      ＊auto : 사용자가 즉시 이용할 수 있도록 웹 문서를 로드할 때마다 미디어 파일도 다운로드함.(서버를 많이 잡아먹는다.) 
- loop : 반복재생 
- poster : 브라우저나 인터넷 문제등으로 영상을 재생할 수 없을 경우 표시 대체 이미지 poster="./img/dark_mode.svg"
    *태그안에 width 쓸 때 px값은 단위 안쓴다 %는 써야한다. 
- type : 웹브라우저가 해당 미디어 파일을 재생할 수 있는지 확인하도록 미디어 파일의 유형을 알려주는 속성.       type="video/mp4" 필수로 써줘야한다. 쓰면 브라우저가 확장자 헷갈리지않고 바로 출력해준다. 

controls 하면 아래와 같은 재생버튼 나온다. 

---

< 브라우저별 호환정보 >

---

속성쓸때는 <video controls> 처럼 video 안에 넣어줘야함

---

< iframe> 태그로 인터넷에서 인터넷 불러오기 

유튜브: 공유버튼- 퍼가기 버튼- 복사붙여넣기