2022.03.31 Today I Learned📚

3. iframe

iframe 현재 html 페이지에서 다른 html 페이지를 보여주고 싶을 때 사용한다(youtube 등).

<iframe src="링크"></iframe>

<iframe width="1280" height="720" src="https://www.example.com/example1/example2" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

• width: 넓이 조절. Defualt값은 300px이다.
• height: 높이 조절. Default값은 150px이다.
• frameborder : 테두리. 0 혹은 1의 값. CSS의 border값을 대신하지만 현재 쓰이지 않는다.
• allow : iframe 에서 허용할 기능들을 지정한다.
• allowfullscreen : 전체화면.

📣 autoplay 속성은 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다.
의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문이다.
→<iframe>, <audio>, <video> 요소 모두 동일하게 적용

• 참고 : https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide

4. audio

<audio> 음악 컨텐츠를 재생하는 태그이다.

<audio src="폴더/파일명" controls autoplay loop ></audio>

• controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러온다.
• autoplay : 로딩이 완료된 파일을 자동으로 재생한다.
  📣Chrome에서 정책상 autoplay가 안 되지만 간혹 되는 경우도 있다. 하지만 정책상 안되기 때문에 JavaScript로 컨트롤한다.
• loop : 음악을 반복한다.

<audio controls>
    <source src="flow.ogg" type="audio/ogg">
    <source src="flow.mp3" type="audio/mpeg">
</audio>

<audio> 요소 역시 <source> 요소를 자식으로 사용할 수 있고, 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있다.

5. video

<video> 는 동영상 파일을 재생하는 태그이다.

<video src="soul.mp4" controls autoplay loop width="450" height="300"></video>

• controls : 영상 파일을 제어할 수 있는 컨트롤러를 불러온다.
• autoplay : 로딩이 완료된 파일을 자동으로 재생한다.
• loop : 반복 재생.

<video controls poster="soul.jpeg" preload="auto" width="450" height="300">
	<source src="soul.mp4" type="video/mp4">
	<source src="soul.ogv" type="video/ogg">
	<source src="soul.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="soul">
</video>

• preload : 좋은 사용자 경험을 위해 고려해 볼 수 있는 속성입니다. (기본 값은 브라우저마다 다릅니다.)
  • none : 비디오 파일을 미리 로딩하지 않는다. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라진다.
  • metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(영상의 길이 등)를 미리 가져오게 한다.
  • auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비한다.
• poster : 로딩 중 일 때 대신해서 화면에 보여줄 이미지.
• <source> : 파일 포멧을 여러가지 지정할 수 있다.
• <track> : <audio> 혹은 <video> 요소의 자식 요소. 자막 등의 시간 기반 텍스트 데이터(텍스트 트랙)를 보여줄 때 사용한다.
  • kind : subtitles(자막), captions(설명) 등의 텍스트 트랙의 종류를 지정할 수 있다.
  • srclang : 텍스트 트랙의 언어를 지정한다.
  • label : 텍스트 트랙의 제목을 정한다.

📣 <video> 태그 사용시 트래픽(데이터의 양)을 고려해야 한다. <video> 태그로 동영상을 서비스하면 트래픽 사용료가 나에게 과금될 수 있다. 만약 매달 400M인 트래픽 용량을 사용하는데 100M짜리 영상을 올리게 되면, 영상을 4번 재생하는 것 만으로 한달치 트래픽을 소진하게 되는 것이다. 그렇게 과금 폭탄이...!

💡자막 (subtitles) VS 설명 (captions)

자막 (subtitles) : 시청자가 이해할 수 없는 언어에 대한 번역을 제공한다.
설명 (captions) : 자막을 포함한 오디오 트랜스크립션을 제공한다. 오디오 트랜스크립션이란 소리를 내는 주체, 음악이나 효과와 같은 비 언어적 소리를 포함한 모든 소리 데이터를 문자로 표현하는것을 말한다.
자막과 설명을 적재적소하게 활용하여 사회적 약자를 위한 웹 서비스를 제공하도록 하자!

💡 코덱(codec) & 포맷(format)

코덱: 촬영을 통해 얻은 원본 영상을 편집하여 압축한 결과물 (H.246, ProRes 등)
포맷: 코덱을 담아 재생 가능한 플레이어에 전달되는 컨테이너 (mp4, WebM 등)

→비디오 파일은 코덱과 포맷의 조합이다.

사용한 코덱의 종류에 따라 영상의 퀄리티와 용량이 결정되고, 코덱에 따라 담을 수 있는 포맷도 다르며, 브라우저에 따라 지원하는 코덱과 포맷이 모두 다르기 때문에 사용하고자 하는 용도에 따라 신중하게 결정해야한다!!

1. 코덱의 정보와 브라우저별 코덱 지원 현황
   https://developer.mozilla.org/ko/docs/Web/Media/Formats/Videocodecs#코덱세부사항

2. 케이스별 코덱과 컨테이너 조합
   https://developer.mozilla.org/ko/docs/Web/Media/Formats/Videocodecs#코덱선택하기