TIL4-HTML, Git

Git

Git의 기초에대해 배웠다!
git add .
git commit -m "커밋메시지"
git push

git은 한없이 어려운 부분이지만... 일단은 매일매일의 기록을 잔디를 촘촘히 해야겠다!
🌱 1일 1커밋!!

<iframe>,<audio>,<video>

<iframe>

iframe은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다.
iframe은 width 혹은 height 속성으로 크기를 조절한다.
따로 값을 설정하지 않는다면 height는 150px, width는 300px을 기본값으로 한다.
*보통 youtube 영상을 불러올 때 사용!

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

💡 autoplay 속성은 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다.
❕ Why? 모바일 환경에서 autoplay 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문에!
이러한 특징은 <iframe>, <audio>, <video> 요소 모두 동일하게 적용된다.

• 참고 : https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide
• 나쁜 예 : https://codingparty.goorm.io/codinghero

<audio>

음악 컨텐츠를 재생하기 위한 태그

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

<video>

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

• controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러옴.
• autoplay : 로딩이 완료된 파일을 자동으로 재생.(Chrome에서 정책상 autoplay가 안됨. 간혹 되는 경우도 있으나 정책상 안되는 것이 맞다. 그래서 js로 컨트롤함.)
• loop : 음악을 반복함.

다음과 같은 코드를 사용하면 크로스브라우징과, 좀 더 사용자 친화적인 비디오를 구현 할 수 있다.

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

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

💡 WebVTT (Web Video Text Tracks)
<track> 요소에서 사용할 자막 파일 포맷. .vtt 로 표시

• 자막 작성법 참고 : https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

💡 자막 (subtitles) VS 설명 (captions)
자막 (subtitles) : 시청자가 이해할 수 없는 언어에 대한 번역을 제공
설명 (captions) : 자막을 포함한 오디오 트랜스크립션을 제공
오디오 트랜스크립션이란 소리를 내는 주체, 음악이나 효과와 같은 비 언어적 소리를 포함한 모든 소리 데이터를 문자로 표현하는것을 말함. 주로 청각장애를 가진 사용자에게 적합함

💡 코덱(codec)과 포맷(format)
웹에서 최적의 비디오 영상을 출력하는 것은 이미지 포맷을 선택하는것에 비해 복잡함.
Why? ❕ 코덱과 포맷(확장자) 때문

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

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

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

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

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

3. 비디오 파일의 제작 과정