Home
AMP
Component

구글 AMP - 미디어

이 글에서는 jwplayer 및 유튜브 같은 타사 파트너의 비디오 및 오디오를 표시하는 방법에 대해 설명합니다. 다음에 대해 자세히 알아보겠습니다.

  • 구글 AMP - JwPlayer
  • 구글 AMP - 유튜브
  • 구글 AMP - 오디오

구글 AMP - JwPlayer

jwplayer를 사용하여 페이지에 비디오를 표시하려면 amp에 amp-jwplayer가 있습니다.

amp-jwplayer로 작업하려면 페이지에 다음 스크립트를 포함하세요.

<script async custom-element="amp-jwplayer" 
src="https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js"></script>

Amp-jwplayer 태그

<amp-jwplayer data-playlist-id="482jsTAr"
              data-player-id="uoIbMPm3"
              layout="responsive"
              width="16"
              height="9">
</amp-jwplayer>

amp 페이지에서 jwplayer의 작동 예는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Jwplayer</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-jwplayer" src="https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Jwplayer</h3>
<amp-jwplayer data-playlist-id="482jsTAr"
              data-player-id="uoIbMPm3"
              layout="responsive"
              width="16"
              height="9">
</amp-jwplayer>
</body>
</html>

결과

amp-jwplayer의 경우 세 가지 중요한 속성이 있습니다.

  • data-player-id
  • data-media-id
  • data-playlist-id

플레이어, 미디어 및 재생 목록의 ID를 얻으려면 jwplayer에 로그인해야합니다. https://dashboard.jwplayer.com/#/players에서 수행할 수 있습니다.

플레이어 ID는 jwplayer 플레이어 섹션에서 확인할 수 있습니다. 미디어 ID는 jwplayer 콘텐츠 섹션에서 사용할 수 있고 jwplayer 재생 목록 섹션에서 재생 목록 ID를 사용할 수 있습니다.

Jwplayer는 각 속성에 대해 amp-jwplayer에서 사용해야하는 8자리 ID를 제공합니다.

구글 AMP - 유튜브

amp 페이지에 유튜브 동영상을 표시하려면 amp에 amp-youtube가있어 페이지에 유튜브 동영상을 삽입할 수 있습니다.

amp-youtube를 사용하려면 페이지에 다음 스크립트를 추가해야 합니다.

<script async custom-element="amp-youtube" 
src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Amp-youtube 태그

<amp-youtube width="480"
             height="270"
             layout="responsive"
             autoplay="true"
             data-videoid="fWZ6-p7mGK0">
</amp-youtube>

이제 페이지에서 amp-youtube의 작동 방식을 보여주는 예를 살펴 보겠습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Youtube</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Youtube</h3> 
<h3>Youtube Videos from Tutorialspoint</h3>
<amp-youtube width="480"
             height="270"
             layout="responsive"
             autoplay="true"
             data-videoid="fWZ6-p7mGK0">
</amp-youtube>
</body>
</html>

결과

유튜브 동영상을 표시하려면 아래와 같이 amp-youtube에 videoid를 제공해야 합니다. 

<amp-youtube width="480"
             height="270"
             layout="responsive"
             autoplay="true"
             data-videoid="fWZ6-p7mGK0">
</amp-youtube>

data-videoid를 얻는 방법

예를 들어 https://www.youtube.com/watch?v=fWZ6-p7mGK0과 같은 유튜브 URL을 고려하십시오. 강조 표시된 부분은 amp-youtube에서 사용할 ID입니다.

autoplay 속성을 true로 사용했습니다. 동영상은 브라우저에서 지원하는대로 자동 재생되며 음소거 모드로도 재생됩니다. 음소거를 해제하려면 비디오를 탭해야 합니다. 비디오가 보기에서 벗어나면 일시 중지되고 보기에 관해서는 일시 중지된 상태에서 다시 시작됩니다. 사용자가 비디오를 일시 중지하고 보기에 들어가거나 나가면 비디오는 일시 중지 상태로만 유지됩니다. mute / unmute에도 동일하게 적용됩니다.

구글 AMP - 오디오

Amp에는 html5 오디오 태그를 대체하는 오디오 재생 태그가 있습니다. amp 페이지에서 오디오를 재생하려면 amp-audio를 사용할 수 있습니다.

amp-audio로 작업하려면 다음 스크립트를 추가해야 합니다.

<script async custom-element="amp-audio" 
src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

Amp-audio 태그

<amp-audio width="auto"
           height="50"
           src="audio/test.mp3">
  <div fallback>
    <p>HTML5 audio is not supported on your browser!</p>
    </div>
</amp-audio>

따라서 amp-audio는 오디오 파일에 대한 http 요청인 src 속성을 사용합니다. 표준 html5 오디오 대신 amp-audio를 사용하는 이유는 amp가 http 요청이 필요한 요소에 대해 지연 로드 개념을 적용하기 때문입니다.

우선 순위에 따라 요청을 로드하기 시작하며, 뷰포트에 도달하기 직전 또는 도달하려고 할 때 로드됩니다.

페이지에서 amp-audio를 사용하는 실제 예는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Audio</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Audio</h3> 
<amp-audio width="auto"
           height="50"
           src="audio/test.mp3">
  <div fallback>
    <p>HTML5 audio is not supported on your browser!</p>
  </div>
</amp-audio>
</body>
</html>

결과

width, height, src와 같은 속성이 지정된 amp-audio의 태그가 여기에 표시됩니다. 또한 브라우저에서 amp-audio가 지원되지 않는 경우 대체로 작동하는 fallback 속성이 있는 div를 추가했습니다. 

<amp-audio width="auto"
           height="50"
           src="audio/test.mp3">
  <div fallback>
    <p>HTML5 audio is not supported on your browser!</p>
  </div>
</amp-audio>

컨트롤은 기본적으로 오디오 태그에 추가되며 오디오를 재생 / 일시 중지하고 음소거 / 음소거 해제하는데 사용할 수 있습니다. 다음과 같이 오디오 태그에 대한 다운로드 옵션이 제공됩니다.

다운로드를 클릭하면 사용 된 미디어 파일을 다운로드 할 수 있습니다. 다운로드를 비활성화하려면 아래 예제와 같이 controlsList="nodownload" 속성을 사용할 수 있습니다. 

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Audio</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Audio</h3> 
<amp-audio width="auto"
           height="50"
           src="audio/test.mp3"
           controlsList="nodownload">
  <div fallback>
    <p>HTML5 audio is not supported on your browser!</p>
  </div>
</amp-audio>
</body>
</html>

결과

controlsList="nodownload"를 사용하면 오른쪽에있는 세 개의 수직 점이 사라집니다.

preload 및 autoplay와 같은 속성이 있습니다. 이러한 속성이 audio 태그에 추가되면 오디오 파일이 페이지 로드 시 로드되고 브라우저에서 지원하는 경우 자동 재생됩니다. 다음 예는 오디오 자동 재생을 보여줍니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Audio</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Audio</h3> 
<amp-audio width="auto"
           height="50"
           src="audio/test.mp3"
           preload
           autoplay>
  <div fallback>
    <p>HTML5 audio is not supported on your browser!</p>
    </div>
</amp-audio>
</body>
</html>

결과

loop 속성이 완료되면 오디오를 다시 재생합니다.

예제

<amp-audio width="auto"
           height="50"
           src="audio/test.mp3"
           loop>
  <div fallback>
    <p>HTML5 audio is not supported on your browser!</p>
  </div>
</amp-audio>
방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기