vimeo HTML 아이프레임 동영상 가져와 자동반복 재생하기

주로 홈페이지나 쇼핑몰에서 기업용 영상을 영상 플랫폼인 Vimeo에 업로드하여 해당 링크를 iframe 으로 가져와 홈페이지내 메인페이지나, 쇼핑몰(고도몰/카페24 등..) 에서의 활용하는 방법에 대해서 알아보도록 하겠다.

 

비메오(Vimeo) 란?

사용자가 직접 제작한 영상을 업로드하여 다른 사용자들과 공유하며 시청할 수있는 동영상 공유 플랫폼으로써, Video 와 Me 를 합쳐 네이밍을 한 유튜브와 같은 플랫폼 회사이다, 유튜브와 같이 영상의 링크를 다른 사이트나 홈페이지에서 가져와 영상을 활용할 수 있도록 되어있다, 이때 사용되는 것은 iframe(Inline Frame) 의 약자로 해당 요소를 활용하여 웹페이지 안에 다른 웹페이지를 제한없이 삽입할 수 있다.

 

아이프레임 (IFrame / Inline Frame) 이란?

현재 페이지에서 다른 웹 사이트의 페이지가 필요한 경우 보다 더 효과적으로 다른 html 페이지를 띄우는 방법중 하나로, 삽입할 url만 있다면 간단하게 삽입이 가능하고, 스크롤이나, 가로/세로 사이즈를 조정할 수 있다.

 

 

준비물 : 영상의 링크

 

띄우고자 하는 영상의 url인 사이트 주소를 확인하여야 한 뒤, 

 

아래와같이 대입하여 사용하도록 한다.

 

<iframe src="영상의주소"
width="가로사이즈" height="세로사이즈" frameborder="0" allowfullscreen>
</iframe>

예시

<iframe src="https://player.vimeo.com/video/76979871?embedparameter=value"
width="640" height="360" frameborder="0" allowfullscreen>
</iframe>

 

매개변수	지원되는 값	기본값	설명	지원되는 동영상
autopause	true , false	TRUE	Vimeo 플레이어는 한 번에 하나의 Vimeo 동영상만 재생하도록 설계되어 있습니다.	모든 동영상
	또는		따라서, 한 페이지에서 둘 이상의 Vimeo 동영상을 재생하려면 각 동영상에 이 매개변수를 추가해야 합니다.
	1,0		⚠️경고:
			- Internet Explorer 11 및 이전 버전에서는 자동 일시 중지 기능이 지원되지 않습니다.
			- 자동 일시 중지가 작동하려면 브라우저에서 쿠키를 활성화해야 합니다.
autoplay	true , false	FALSE	자동으로 동영상 재생을 시작합니다.	모든 동영상
	또는		⚠️ 경고: IOS, Chrome 66+, Safari 11+ 등 일부 환경에서는 자동 재생이 차단될 수 있습니다. 이 경우, 시청자가 재생을 시작해야 하는 표준 재생으로 전환합니다.
	1,0
background	true , false	FALSE	이 매개변수를 추가하면 다음 변화가 적용됩니다:	동영상은 Plus 계정 이상으로 호스팅해야 합니다.
	또는		1. 모든 플레이어 토글 및 요소는 비활성화됩니다 (재생/일시 정지 버튼 포함)
			2. 동영상이 자동으로 반복 재생됩니다.
	1,0		3. 동영상이 자동 재생되도록 설정됩니다.
			4. 동영상이 무음으로 재생됩니다.
			동영상이 반복되거나 자동 재생되지 않도록 하려면 아래 controls=0 매개변수를 확인하세요.
			이 매개변수를 설정해도 키보드 컨트롤은 비활성화되지 않습니다.
byline	true , false	사이트의	동영상 만든이를 표시합니다. (창작가 표시)	모든 동영상
	또는	에서 지정한 값		(동영상 소유자가 허용하는 경우에만)
	1,0
color	[hex code]	Vimeo blue-	동영상 컨트롤의 색상을 지정합니다. 색상은 동영상의 임베딩 설정에 의해 재정의될 수 있습니다.	동영상은 Plus 계정 이상으로 호스팅해야 합니다.
controls	true , false	true	이 매개변수는 크롬리스 경험을 위해 플레이어의 모든 요소 (플레이바, 공유 버튼 등)를 숨깁니다.	동영상은 Plus 이상 계정에서 호스팅해야 합니다.
	또는
	1,0		⚠️경고:
			이 매개변수를 사용하면 재생/일시 중지 버튼이 숨겨집니다. 시청자를 위해 재생을 시작하려면 자동 재생을 활성화하거나 키보드 컨트롤을 사용하거나 플레이어 SDK를 구현하여 재생을 시작하고 제어해야 합니다.
			이 매개변수를 설정해도 키보드 컨트롤은 비활성화되지 않습니다.
dnt	true , false	FALSE	이 매개변수를 'true'로 설정하면 플레이어가 모든 쿠키와 애널리틱스 및 모든 세션 데이터를 추적하지 못합니다.	모든 동영상
	또는		(브라우저에서 추적 안 함 설정을 활성화하는 것과 동일한 효과가 발생합니다.)
	1,0
loop	true , false	FALSE	끝에 도달하면 무한으로 동영상을 다시 재생합니다.	모든 동영상
	또는		참고: 반복재생은 임베딩 설정 페이지에서 동영상의 종료 화면으로 선택할 수도 있습니다. 여기에서 자세히 알아보세요.
	1,0
muted	true , false	FALSE	로드 시 동영상을 음소거하도록 설정합니다. 시청자가 플레이어에서 볼륨 기본 설정을 조정할 수도 있습니다.	모든 동영상
	또는		Chrome이나 Safari 등 특정 브라우저에서 배경 동영상을 음소거 해제하거나 자동 재생 제한을 조정하는 데 사용할 수 있습니다.
	1,0
	true, false	FALSE	컨트롤 바에 PIP (Picture-in-Picture) 버튼을 표시하고 PIP API를 활성화합니다.	모든 동영상
	또는
	1,0
playsinline	true , false	TRUE	동영상이 자동으로 전체 화면 모드로 전환되는 대신 모바일 기기에서 인라인으로 재생됩니다. 인라인 재생은 모든 동영상에서 기본적으로 활성화되어 있습니다.	모든 동영상
	또는
	1,0
portrait	true , false	사이트의	만든이의 프로필 이미지를 표시합니다(포트레이트).	모든 동영상
	또는	임베딩 설정		(동영상 소유자가 허용하는 경우에만)
	1,0
quality	240p, 360p, 540p, 720p, 1080p, 2k, 4k	auto	기본적으로 Vimeo 플레이어는 "자동" 모드로 설정되어 있습니다. 즉, 시청자의 대역폭과 재생 환경의 여러 요인들에 따라 가능한 최고 수준의 동영상 품질을 선택합니다.	동영상은 Plus 계정 이상으로 호스팅해야 합니다.
			품질 매개변수를 사용하면 임베딩된 동영상에 대해 기본 재생 품질을 지정할 수 있습니다. 특정 동영상에 존재하지 않는 품질을 선택하면 품질 매개변수가 무시되고 임베딩 동영상의 기본값이 Auto로 자동 설정됩니다.
			⚠️경고:
			- 이 매개변수는 모바일 기기 또는 태블릿에서 지원되지 않습니다.
			- 이 매개변수를 구현할 때 주의하세요. 더 높은 품질 (예: 4K)로 기본값을 설정하면 시청자에게 과도한 버퍼링 및 끊김 현상이 발생할 수 있습니다.
			- 이 매개변수는 업로드된 동영상 및 임베드된 아카이브 이벤트에만 지원됩니다. 라이브 이벤트에는 지원되지 않습니다.
speed	true , false	FALSE	플레이어의 기본 설정 메뉴에서 속도 컨트롤을 표시하고 재생 속도 API를 활성화합니다. (플레이어 API에 관한 자세한 내용은 여기에서 알아보세요)	동영상은 Pro 계정 이상으로 호스팅해야 합니다.
	또는
	1,0
#t	분 및/또는 초 단위로 표시되는 시간(예: #t=1m2s)	동영상 시작	특정 시점에서 자동으로 재생을 시작하는 데 사용됩니다. 자세한 내용은 여기에서 확인하세요.	모든 동영상
			참고: 이 매개변수는 다른 매개변수처럼 접두사가 붙은 물음표를 요구하지 않습니다.
	소문자 언어 코드 및 선택적인 텍스트 트랙의 로케일 및 유형		플레이어에서 기본적으로 주어진 CC/자막 트랙을 표시합니다. (CC/자막 트랙 보류 가능)	캡션 또는 자막이 있는 모든 동영상
	(예: 'en', 'en-US', 'en.captions', 'en.subtitles)			(참고: 캡션 및 자막은 동영상 소유자가 업로드해야 합니다.)
			특정 동영상에 아직 업로드되지 않은 언어 환경 설정을 입력하면 텍스트 트랙 매개변수가 무시되고 임베드된 동영상은 기본값에 의해 비활성화된 CC 또는 자막과 함께 로드될 수 있습니다.
title	true , false	사이트의	동영상 제목을 표시합니다.	모든 동영상
	또는	임베드 설정		(동영상 소유자가 허용하는 경우에만)
	1,0
transparent	true , false	TRUE	기본적으로 플레이어 iframe의 배경은 Vimeo에서 투명입니다.	모든 동영상
	또는		비활성화하면 iframe 배경이 다시 검정색이 됩니다. 임베딩된 플레이어에 대한 높이 및 너비 치수가 동영상의 기존 종횡비와 일치하지 않는 경우에는(예: iframe 치수가 4:3 사각형으로 설정되었으나 원본 동영상은 16:9 와이드인 경우) 검정색 막대가 플레이어에 적용됩니다.
	1,0

출처

https://vimeo.zendesk.com/hc/ko/articles/360001494447-%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9

플레이어 매개변수 사용

 

vimeo 에서 지원하는 변수는 위와같다, 위의 변수를 사용하는 방법은 

 

<iframe src='https://player.vimeo.com/video/76979871?autoplay=true&loop=true&muted=true'
width='640' height='360' frameborder='0' allowfullscreen>
</iframe>

위의 도메인 링크 뒤에 ? 를 붙인뒤, 매개 변수의 값을 지정해 넣고 &로 이어주면 된다.

 

위의 내용을 해석하자면

https://player.vimeo.com/video/76979871 의 링크를

autoplay=true : 자동으로 플레이

loop=true : 반복하며

muted=true : 음소거한다.

 

위와같이 사용하면 크롬이나, 엣지 등의 브라우저에서 자동으로 반복되어 플레이 된다, 음소거의 이유는 크롬에서 소리가 나오는경우 자동으로 재생이 불가능하도록 설정되어있기 때문에 음소거를 넣었다.

위의 소스를 넣게되면 아래와같이 재생된다.

 

 

위와같이, 자동으로 무한 재생되며 소리는 음소거 된 채로 플레이 되게된다.

 

대량 작업을 하는 쇼핑몰 관리자가 사용할만한 내용으로 엑셀에 링크와, 사이즈 등을 넣으면 알아서 해당소스가 복사되도록 소스를 짜두었다.

vimeo.xlsx

0.04MB

C,E,G,K,M 만 입력하면, P열에는 복사만하여 사용할수 있으니 참고하면 좋겠다.