※ 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도 상관없는듯
'🛠️ Dev.' 카테고리의 다른 글
VS code 자바 디버그 콘솔에 아무것도 안뜰 때 해결방법 (0) | 2024.07.02 |
---|---|
Vs code live server 자동 새로고침 안될때 해결방법 + 라이브 서버 자동 저장방법 (0) | 2024.01.04 |
VS code 코딩프로그램 배경화면테마 바꾸기 (테마적용)(+초보자용 .json 설정값) (0) | 2024.01.04 |
VS Code 초보팁! 태그 자동완성 끄는법 (IntelliSense 끄기) (2) | 2024.01.04 |
구글 드라이브 오디오 파일 html 불러오기 (1) | 2023.10.02 |