유튜브 Iframe 영상 파일 html 불러오기 (반복재생,뮤트,화질조정)

※ 100MB 이하면 구글 드라이브에 올려서 깔끔하고 빠르게 가져올 수 있지만

필자가 이번에 하는 프로젝트는 그럴 수 없어서 기록.

 

 

 

 

 

 

See the Pen 유튜브 영상 HTML넣기 by hesper03 (@whdldi) on CodePen.

 

◆ 사용한 코드 설명:

• src: YouTube 동영상 재생 주소입니다.
• autoplay=1: 동영상을 자동으로 재생하도록 지정하는 매개변수입니다. "1"로 설정하면 동영상이 페이지를 로드할 때 자동으로 재생됩니다.
• mute=1: 동영상을 음소거로 설정하는 매개변수입니다. "1"로 설정하면 동영상이 음소거 상태로 재생됩니다.
• vq=small: 동영상 화질을 "small"로 설정하는 매개변수입니다. 이것은 동영상을 상대적으로 낮은 화질로 표시하도록 지시하는 것입니다.
• controls=1: 동영상 재생 컨트롤러를 표시하도록 지정하는 매개변수입니다. "1"로 설정하면 동영상 아래에 플레이어 컨트롤러가 나타납니다.
• loop=1: 동영상을 반복 재생하도록 지정하는 매개변수입니다. "1"로 설정하면 동영상이 종료될 때 자동으로 다시 시작합니다.
• playlist=W86cTIoMv2U: 재생할 동영상의 재생 목록입니다. 이것은 동영상 자체를 재생 목록에 추가하는 역할을 합니다.
• allowfullscreen: 동영상 플레이어가 전체 화면 모드로 전환할 수 있도록 허용하는 매개변수입니다.
• frameborder="0": <iframe> 태그의 테두리를 없애는 매개변수입니다.
• scrolling="no": 스크롤 막대를 표시하지 않도록 지정하는 매개변수입니다.
• allow: 동영상 재생에 대한 추가 권한을 부여하는 매개변수입니다.
• modestbranding="0": YouTube 동영상 플레이어에 나타나는 YouTube 로고를 표시하지 않도록 지정하는 매개변수입니다. 그러나 이 매개변수를 "0"으로 설정하면 로고가 표시됩니다.

* 동영상이 자동으로 재생되며 음소거 상태로 시작하며,

사용자에게 컨트롤러를 제공하고 원하는 화질로 설정되며 반복 재생되는 코드

 

※ 참고로 YouTube에서 제공하는 화질 옵션은 small, medium, large, hd720, hd1080, highres 등이 있음.

vq=small을 사용하면 가장 낮은 화질로 동영상을 가져올 수 있음

 

 

 

 

 

 

 

======================

📌필자 기록용

이 프로젝트의 경우 한 페이지에 유튜브 영상을 무려 6개나 동시재생 해야함.

고화질로 재생될 경우 램 32gb의 컴퓨터에서도 영상로딩이 걸리는 이슈가 있음.

 

 

◆ 영상로딩 최적화 포맷 (한 페이지에 6개 자동재생 할 시)

다음 팟 인코더에서 최적화

- 웹 업로드용 : 사용자 설정

- 세부설정 : 720x480 (이하는 너무 깨짐) 

 

* 1시간 영상 1.94Gb ->238Mb 로 변환가능)

* mp4가 최적이라곤 하지만 avi도 상관없는듯