디지털 광고주가 AMP 동영상 및 속성에 대해 알아야 할 모든 것

오늘날 수백만 개의 도메인에서 Accelerated Mobile Pages 프레임워크를 사용하여 수십억 개의 인스턴트 로딩 페이지를 게시했습니다. 몇 년 전에 시작된 이 프로젝트는 웹 페이지 로드 시간뿐만 아니라 사용자 경험과 결과적으로 비즈니스 ROI를 개선하는 데 성공적으로 도움이 되었습니다.

JavaScript에 대한 제한, 널리 사용되는 코딩 언어의 경량 대체 및 Google 콘텐츠 전송 네트워크의 캐싱을 통해 페이지의 "무게"(크기 데이터)를 줄임으로써 달성되었습니다.

그러나 프로젝트의 가장 큰 비판은 속도를 위해 참여를 교환했다는 것입니다. 한때는 AMP가 정적 콘텐츠를 위해 뉴스 사이트에서 주로 사용되었지만 이제는 그렇지 않습니다. 이제 AMP를 사용하여 비디오와 같은 무거운 페이지 요소의 고속 버전으로 완성된 전체 웹사이트를 구축할 수 있습니다. 오늘 우리는 이러한 AMP 비디오 구성 요소가 어떻게 작동하는지, 특정 코딩 용어의 정의, 분석 기능, 레이아웃 등에 대해 정확히 설명합니다.

속성

각 AMP 동영상 구성요소에는 일련의 속성이 있습니다. 일부는 겹치고 일부는 구성 요소에 고유하며 각각 비디오가 작동하거나 표시되는 방식을 제어합니다.

다음은 구성 요소에서 찾을 수 있는 특성 목록과 그 의미입니다. 이 목록은 포괄적 이지 않습니다 . 구성 요소를 페이지에 추가하기 전에 구성 요소의 전용 AMP 개발자 페이지를 다시 확인하는 것이 가장 좋습니다.

• src: <source>가 지정되지 않은 경우 이 요소는 필수입니다. HTTPS에서 지정해야 합니다.
• 포스터: 시청자가 "재생"을 클릭하기 전에 표시되는 이미지 축소판을 지정합니다. 첫 번째 프레임은 기본적으로 표시됩니다. 클릭 재생인 오버레이를 표시하도록 선택할 수도 있습니다.
• autoplay: 브라우저가 자동 재생을 지원하는 경우 이 속성을 사용하여 비디오가 방문자에게 표시되는 즉시 자동 재생되도록 할 수 있습니다.
• controls: 이 속성을 사용하면 브라우저는 사용자가 비디오 플레이어를 제어할 수 있는 컨트롤을 제공합니다.
• controlsList: 일부 브라우저에서만 지원되는 controlsList를 사용하면 사용자가 재생을 조정하는 데 사용할 수 있는 컨트롤을 표시할 수 있습니다.
• dock: amp-video-docking 확장 프로그램과 결합하면 이 속성은 사용자가 해당 영역 밖으로 스크롤할 때 동영상 플레이어를 최소화하고 모서리에 고정합니다.
• 루프: 구현되면 비디오가 끝에 도달하면 자동으로 시작 부분으로 루프백됩니다.
• crossorigin: 비디오가 원본 문서가 아닌 다른 곳에서 호스팅되는 경우 이 요소가 필요합니다.
• disableremoteplayback: 이 요소를 사용하여 Chromecast 또는 AirPlay와 같은 시스템을 통한 원격 재생을 비활성화합니다.
• noaudio: 이 속성은 비디오에서 오디오를 비활성화합니다.
• 전체 화면으로 회전: 이 속성이 활성화되면 사용자가 장치를 돌릴 때 비디오가 전체 화면으로 조정됩니다.

공통 속성

공통 속성은 많은 AMP 구성요소에 적용되는 속성입니다. AMP 동영상 구성요소 목록에서 '공통 속성'에 대한 참조가 표시되면 다음을 함께 사용할 수 있음을 의미합니다.

폴백

폴백을 사용하면 브라우저가 요소를 지원하지 않거나 로드에 실패한 경우 뷰어와 통신합니다. 아래 예에서 오류 메시지는 "이 장치에서 애니메이션 이미지를 재생할 수 없습니다."입니다. 대체는 대체를 지원하는 모든 AMP 요소에서 사용할 수 있으며 지원되지 않는 요소 대신 표시됩니다.

고지

요소가 반응형 레이아웃을 지원하는 경우 높이 속성도 지원합니다. 높이 속성은 미디어 표현을 기반으로 지정되며 높이에만 적용됩니다. 백분율 값이 허용됩니다. 아래 예와 같이 높이가 80%인 경우 요소의 높이는 너비의 80%가 됩니다.

형세

레이아웃 속성은 요소의 동작 방식을 지정합니다. 요소에 대해 지원되는 레이아웃 값 중 하나와 함께 레이아웃 특성을 추가하여 구성 요소에 대한 레이아웃을 지정할 수 있습니다(자세한 내용은 나중에 설명).

미디어

대부분의 AMP 요소는 미디어 속성을 지원합니다. 미디어의 가치는 미디어 쿼리입니다. 쿼리가 일치하지 않으면 요소가 렌더링되지 않으며 해당 리소스 및 잠재적으로 해당 하위 리소스를 가져오지 않습니다. 브라우저 창의 크기나 방향이 변경되면 미디어 쿼리가 다시 평가되고 새 결과에 따라 요소가 숨겨지고 표시됩니다.

노로딩

로드할 때 많은 AMP 요소가 기본 로드 애니메이션을 표시하며 이는 표시를 위해 요소가 처리되고 있음을 나타냅니다. noloading 속성은 해당 애니메이션이 표시되는지 여부를 제어합니다.

자리 표시자

자리 표시자 속성으로 표시된 요소는 상위 요소에 대한 자리 표시자를 표시합니다. 아래 예에서 미리보기 이미지는 애니메이션 GIF의 자리 표시자로 표시됩니다. 이 속성은 자리 표시자를 지원하는 AMP 요소의 하위인 모든 HTML 요소에서 사용할 수 있습니다.

자리 표시자는 기본적으로 상위 위치에 즉시 표시됩니다. 리소스가 제공되면 자리 표시자가 숨겨지고 해당 위치에 리소스가 표시됩니다.

크기

AMP 요소가 반응형 레이아웃을 지원하는 경우 크기 속성도 지원합니다. 현재 사용자의 창 크기를 기반으로 미디어 쿼리에 의해 정의된 이 속성입니다.

너비와 높이

특정 레이아웃에서 일부 AMP 구성 요소에 대해 픽셀 값을 포함하는 너비 및 높이 속성을 지정해야 합니다.

형세

AMP 개발자 리소스에 따르면 AMP의 <amp-img> 및 <amp-video> 요소는 6가지 레이아웃 중 하나를 가질 수 있으며 각 레이아웃은 요소가 다르게 동작하도록 합니다.

반응형

요소가 반응형으로 만들어지면 지정된 영역의 공간에 맞게 자동으로 크기가 조정됩니다. 사용 가능한 공간은 상위 요소에 따라 다릅니다.

그러나 단순히 요소를 반응형으로 지정할 수는 없습니다. 표시되도록 하려면 포함 요소의 너비와 높이를 지정해야 합니다.

표시 없음

이 레이아웃을 사용하면 요소가 표시되지 않습니다. 화면에서 공간을 전혀 차지하지 않습니다. 모든 AMP 요소에 적용할 수 있으며 예를 들어 팝업을 활성화하기 위해 마우스를 가져가는 것과 같은 사용자 작업으로 요소를 표시할 수 있다고 가정합니다.

본질적인

이 레이아웃에서 요소는 사용 가능한 공간을 소비하며 자연 크기 또는 max-width와 같은 CSS 제약 조건에 도달할 때까지 너비 및 높이 속성에 따라 높이 크기를 조정합니다.
사용 가능한 공간은 상위 요소에 따라 다릅니다.

플렉스 아이템

이 레이아웃을 사용하면 "display: flex"와 같이 유연한 컨테이너일 때 부모의 요소가 해당 부모의 나머지 공간을 소비합니다.

고정 높이

고정 높이로 지정된 요소는 사용 가능한 공간에 맞게 조정되지만 높이는 일정하게 유지됩니다. 이 경우 높이 속성은 있어야 하며 너비 속성은 없어야 합니다(또는 있는 경우 0과 같음).

결정된

고정 요소는 높이와 너비가 고정되어 있으며 응답성이 지원되지 않습니다. 이 레이아웃을 사용하려면 너비와 높이를 모두 지정해야 합니다.

채우다

이 레이아웃을 사용하면 요소가 사용 가능한 모든 높이와 너비를 채웁니다. 부모 컨테이너가 "position:relative" 또는 "position:absolute"를 지정하는 한 부모 요소의 높이와 너비와 일치합니다.

컨테이너

HTML div와 마찬가지로 이 레이아웃을 사용하면 요소의 자식이 크기를 정의할 수 있습니다. 컨테이너를 사용하면 구성 요소가 컨테이너 역할만 하며 특정 레이아웃 자체가 없습니다. 자식은 즉시 렌더링됩니다.

분석 지원

모든 AMP 동영상 구성요소에는 다른 동영상 플레이어가 보유한 분석 기능이 없을 수 있지만 그렇다고 해서 매우 구체적인 동영상 성능 측정항목을 추적할 수 없다는 의미는 아닙니다. 추적할 수 있는 항목은 다음과 같습니다.

• autoplay: 비디오가 자동 재생 비디오로 시작되었는지 여부를 나타냅니다.
• currentTime: 트리거 시점의 현재 재생 시간(초)을 지정합니다.
• 기간: 비디오의 총 길이(초)를 지정합니다.
• 높이: 비디오의 높이(px)를 지정합니다.
• id: 비디오 요소의 ID를 지정합니다.
• playingTotal: 사용자가 비디오를 본 총 시간을 지정합니다.
• state: 상태를 나타내며 "playing_auto", "playing_manual" 또는 "paused" 중 하나일 수 있습니다.
• 너비: 비디오의 너비(px)를 지정합니다.
• playingRangesJson: 사용자가 비디오를 본 시간의 세그먼트를 나타냅니다(JSON 형식).

일부 AMP 동영상 구성요소의 경우 이러한 측정항목을 모두 감지할 수 있습니다. 다른 사람들에게는 부분적인 분석 지원만 제공됩니다. 부분 지원은 currentTime, aduration, playingRangesJson 및 playingTotal 을 제외한 모든 항목이 지원됨을 의미합니다. AMP 동영상 구성요소 섹션에서 분석 지원 수준을 확인할 수 있습니다. 여기에서 AMP 동영상 분석에 대해 자세히 알아보세요.

AMP 동영상 구성요소

앰프 비디오

amp-video 구성요소는 HTML5 동영상 태그를 대체합니다. 직접 HTML5 비디오 파일 삽입에만 사용됩니다. amp-video 구성요소는 런타임에 의해 결정된 시간에 src 속성으로 지정된 동영상 리소스를 느리게 로드합니다. 표준 HTML5 <video> 태그와 거의 같은 방식으로 amp-video 구성요소를 제어할 수 있습니다.

예

분석 지원: 전체

필요한 스크립트: <script async custom-element=”amp-video” src=”https://cdn.ampproject.org/v0/amp-video-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 디스플레이 없음, 반응형

속성: src, poster, autoplay, controls, controlsList, dock, loop, crossorigin, disableremoteplayback, noaudio, 전체 화면으로 회전, 공통 속성

amp-3q-플레이어

amp-3q-player 구성 요소를 사용하면 개발자가 3Q SDN의 비디오를 포함할 수 있습니다.

예시

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-3q-player” src=”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 가변 항목, 반응형

속성: 자동재생(선택사항), 공통 속성

amp-brightcove

amp-brightcove 구성 요소는 Brightcove의 Video Cloud 또는 Brightcove Player에서 볼 수 있는 비디오 플레이어를 포함합니다.

예

분석 지원: 전체

필요한 스크립트: <script async custom-element=”amp-brightcove” src=”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 디스플레이 없음, 반응형

속성: data-account, data-player 또는 data-player-id, data-embed, data-video-id, data-playlist-id, data-referrer, data-param-

amp-dailymotion

amp-dailymotion 구성요소가 Dailymotion 플레이어의 동영상을 표시하는 경우.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-dailymotion” src=”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: autoplay, data-videoid(필수), data-mute(선택), data-endscreen-enable(선택), data-sharing-enable(선택), data-start(선택), data-ui-highlight(선택) ), data-ui-logo(선택 사항), data-info(선택 사항), data-param-*(선택 사항), 도크, 공통 속성

amp-페이스북

amp-facebook 구성요소는 이 목록에 있는 많은 태그보다 조금 더 다재다능합니다. 동영상 외에도 amp-facebook 태그는 Facebook 댓글이나 게시물도 표시할 수 있습니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 디스플레이 없음, 반응형

속성: data-href(필수), data-embed-as, data-align-center, data-locale(선택), 공통 속성

amp-gfycat

amp-gfycat 구성요소는 gfycat.com의 GIF를 표시합니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-gfycat” src=”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: data-gfyid, 너비 및 높이, noautoplay, 공통 속성

암페어

amp-hulu 구성요소는 Hulu의 동영상을 삽입합니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-hulu” src=”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: data-eid, 공통 속성

amp-ima-비디오

amp-ima-video는 인스트림 동영상 광고용 동영상 플레이어를 포함합니다. 이 구성요소에는 VAST 호환 광고 응답에 대한 URL인 data-tag에 제공된 광고 태그가 필요합니다(예: IMA 샘플 태그 참조).

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-ima-video” src=”https://cdn.ampproject.org/v0/amp-ima-video-0.1.js”></script>

사용 가능한 레이아웃: 고정, 반응형

속성: data-tag(필수), data-src, data-crossorigin, data-poster(선택), data-delay-ad-request(선택), data-ad-label(선택), dock, 공통 속성

amp-izlesene

amp-izlesene 구성 요소를 사용하면 사용자가 Izlesene 비디오를 삽입할 수 있습니다.

예

분석 지원: : 일부

필요한 스크립트: <script async custom-element=”amp-izlesene” src=”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: data-videoid(필수), data-param-showrel

amp-kaltura-플레이어

amp-kaltura-player 구성 요소를 사용하면 Kaltura 비디오 플랫폼 플레이어를 사용하여 비디오를 삽입할 수 있습니다.

예

분석 지원: : 일부

필요한 스크립트: <script async custom-element=”amp-kaltura-player” src=”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 디스플레이 없음, 반응형

속성: data-partner, data-uiconf, data-entryid, data-param-*, 공통 속성.

amp-ooyala-플레이어

amp-ooyala-player를 사용하면 사용자가 Ooyala 비디오를 삽입할 수 있습니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-ooyala-player” src=”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 가변 항목, 반응형

속성: data-embedcode(필수), data-playerid(필수), data-pcode(필수), data-playerversion(선택), data-config(선택), 공통 속성

앰프 리치 플레이어

amp-reach-player 구성요소를 사용하면 사용자가 Beachfront Reach 플랫폼에 있는 Reach Player를 삽입할 수 있습니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-reach-player” src=”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: data-embed-id, 공통 속성

amp-스프링보드-플레이어

amp-springboard-player는 Springboard에서 사용되는 플레이어를 표시합니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-springboard-player” src=”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 가변 항목, 반응형

속성: date-site-id(필수), data-mode(필수), data-content-id(필수), data-player-id(필수), data-domain(필수), data-items(필수), 공통 속성

앰프 비디오 도킹

amp-video-docking 확장 프로그램을 사용하면 동영상을 페이지 모서리나 맞춤 배치 요소로 최소화할 수 있지만 동영상이 수동으로 재생되는 경우에만 가능합니다. 사용자가 비디오 구성 요소 영역 밖으로 스크롤하면 비디오가 최소화되고 지정된 위치로 이동합니다. 사용자가 뒤로 스크롤하면 원래 위치로 돌아갑니다. 추가적으로…

• 비디오는 기본 모서리 또는 사용자 지정 고정 위치에 도킹할 수 있습니다.
• 비디오는 사용자가 다른 모서리로 드래그하여 위치를 변경할 수 있습니다.
• 동영상을 튕겨 도킹된 위치에서 해제할 수 있습니다.
• 동일한 페이지에 있는 여러 비디오를 도킹할 수 있지만 한 번에 하나만 도킹되고 수정됩니다.

기본적으로 비디오는 오른쪽 상단으로 최소화됩니다. 뷰포트 너비의 30%에서 너비가 180픽셀 이상입니다. 문서가 RTL인 경우 비디오는 왼쪽 상단 모서리에 도킹됩니다. 이 모드에 있을 때 사용자는 도킹된 비디오를 드래그하여 한쪽 모서리에 스냅할 수 있습니다.

이 확장 프로그램은 지원되는 비디오 플레이어에서만 사용할 수 있습니다. 현재 지원되는 플레이어는 다음과 같습니다.

• amp-brightcove
• amp-dailymotion
• 앰프 기쁨 플레이어
• amp-ima-비디오
• 앰프 비디오
• amp-동영상-iframe
• amp-youtube

다시 말하지만 비디오는 수동으로 재생되는 경우에만 도킹됩니다. 이는 다음을 의미합니다.

• 비디오에 자동 재생이 있는 경우 사용자가 먼저 비디오를 클릭하지 않으면 기능이 트리거되지 않습니다.
• 비디오에 자동 재생 기능이 없으면 사용자가 비디오를 재생하지 않으면 기능이 트리거되지 않습니다.
• 스크롤하는 동안 비디오가 일시 중지되면 도킹되지 않습니다.

필요한 스크립트: <script async custom-element=”amp-video-docking” src=”https://cdn.ampproject.org/v0/amp-video-docking-0.1.js”></script>

amp-동영상-iframe

amp-video-iframe은 동영상 플레이어가 포함된 iframe을 표시합니다. 이 구성요소 는 광고 표시의 주된 목적으로 사용되어서는 안 됩니다. 동영상의 일부가 광고인 동영상을 표시할 목적으로 amp-video-iframe을 사용해도 됩니다. 그러나 광고 사용 사례에서는 대신 amp-ad를 사용해야 합니다.

예

비디오 통합이 작동하려면 프레임 안에 있는 문서에 작은 라이브러리가 포함되어야 합니다.

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 내장, 디스플레이 없음, 반응형

속성: src(필수), 포스터(필수), 자동 재생, 공통 속성, 독, implements-media-session, implements-rotate-to-fullscreen

amp-vimeo

amp-vimeo 구성요소를 사용하면 Vimeo에서 동영상을 삽입할 수 있습니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: autoplay, data-videoid(필수)

amp-viqeo-플레이어

amp-viqeo-player는 Viqeo 비디오 플레이어를 표시합니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-viqeo-player” src=”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: autoplay, data-profileid, data-videoid, 너비 및 높이

amp-wistia-플레이어

amp-wistia-player 구성요소를 사용하면 사용자가 삽입할 수 있습니다.

예

분석 지원: 부분

필요한 스크립트: <script async custom-element=”amp-wistia-player” src=”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”></script>

사용 가능한 레이아웃: 채우기, 고정, 고정 높이, 가변 항목, 반응형

속성: data-media-hashed-id, 공통 속성

amp-youtube

amp-youtube 구성요소를 사용하면 크리에이터가 YouTube 동영상을 삽입할 수 있습니다.

예

필요한 스크립트: <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

속성: autoplay, data-videoid, data-live-channelid, data-param-*, dock, 자격 증명(선택 사항), 공통 속성.

결론

AMP 웹 페이지는 미디어 표시와 관련하여 더 이상 제한되지 않습니다. 속성, 레이아웃 및 분석과 결합된 AMP 비디오 구성 요소를 사용하면 제작자가 속도 저하 없이 풍부한 시각화를 표시할 수 있습니다. 더 빠른 모바일 클릭 후 방문 페이지를 만들 준비가 되셨습니까?

오늘 Instapage AMP로 시작하고 완료하세요.