Vue에서 유튜브 트레일러 만들기

ddullgi·2022년 11월 27일
vue
1
post-thumbnail

2022.05.10 작성글

사용한 기술

YouTube IFrame Player API

유튜브 동영상 Id를 통하여 video 플레이어를 랜더해준다

YOUTUBE-VUE

iframe을 vue에서 사용하기 편하게 만들어주는 모듈

<iframe> 사용법

<iframe id="player" type="text/html" width="640" height="360"
  src="http://www.youtube.com/embed/{videoId}"
  frameborder="0"></iframe>
  • width, height옵션으로 동영상 크기 조정
  • src로 동영상 주소 호출
    • videoId: 동영상 id

YOUTUBE-VUE 사용법

설치

npm install vue-youtube

사용

Bundler (Webpack, Rollup)

<script>
...
import Vue from 'vue'
import VueYoutube from 'vue-youtube'
 
Vue.use(VueYoutube)
...
</script>
  • 컴포넌트의 <script>단에서 작성

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-youtube/dist/vue-youtube.js"></script>
  • public > index.html 파일의 <body> 태그 밑에 작성

사용 예시

<youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
# 동영상을 랜더해주는 부분
<button @click="playVideo">play</button>
# 이벤트의 객체
  • @playing동영상이 재생되기 시작했을 때 작동하는 이벤트
export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA'
      playerVars: {
        autoplay: 1
      }
    }
  },
  methods: {
    # 동영상 재생
    playVideo() {
      this.player.playVideo()
    },
    # 동영상이 재생되기 시작할때 실행
    playing() {
      console.log('we are watching!!!')
    }
  }

  • videoId 에 동영상의 Id값을 할당해주면 된다

  • playVideo()를 호출하면 동영상이 재생된다.

  • pauseVideo()를 호출하면 동영상이 정지된다.

  • playerVars 객체 안에 플레이어의 옵션을 넣어주면 된다.

    매개변수
    autoplay이 매개변수는 플레이어가 로드될 때 첫 번째 동영상을 자동으로 재생할지 여부를 지정합니다. 지원되는 값은 0 또는 1입니다. 기본값은 {0/}입니다.
    cc_lang_pref이 매개변수는 플레이어에서 자막을 표시하는 데 사용할 기본 언어를 지정합니다. 매개변수 값을 ISO 639-1 두 자리 언어 코드로 설정합니다. 이 매개변수를 사용하고 cc_load_policy 매개변수를 1로 설정하면 플레이어가 로드될 때 플레이어에 지정된 언어로 자막이 표시됩니다. cc_load_policy 매개변수를 설정하지 않으면 기본적으로 자막이 표시되지 않습니다. 그러나 사용자가 자막을 사용하도록 선택하면 지정된 언어로 자막이 표시됩니다.
    cc_load_policy매개변수의 값을 1로 설정하면 사용자가 자막을 사용 중지하더라도 자막이 기본적으로 표시됩니다. 기본 동작은 사용자 환경설정을 기준으로 합니다.
    color이 매개변수는 시청자가 동영상에서 이미 시청한 부분을 강조표시하기 위해 플레이어의 동영상 진행률 표시줄에서 사용할 색상을 지정합니다. 유효한 매개변수 값은 red 및 white이며 기본적으로 플레이어는 동영상 진행률 표시줄에서 빨간색을 사용합니다. 색상 옵션에 대한 자세한 내용은 YouTube API 블로그를 참조하세요. 참고: color 매개변수를 white로 설정하면 modestbranding 옵션이 사용 중지됩니다.
    controls이 매개변수는 동영상 플레이어 컨트롤을 표시할지 여부를 나타냅니다.controls=0 – 플레이어 컨트롤이 플레이어에 표시되지 않습니다.controls=1(기본값) – 플레이어 컨트롤이 플레이어에 표시됩니다.
    disablekb매개변수 값을 1으로 설정하면 플레이어가 키보드 컨트롤에 응답하지 않습니다. 기본값은 0이며 이 값을 사용하면 키보드 컨트롤이 사용 설정됩니다. 현재 지원되는 키보드 컨트롤은 다음과 같습니다.스페이스바 또는 [k]: 재생/일시중지왼쪽 화살표: 현재 동영상에서 뒤로 5초 이동오른쪽 화살표: 현재 동영상에서 앞으로 5초 이동위쪽 화살표: 볼륨 높임아래쪽 화살표: 볼륨 낮춤[f]: 전체 화면 표시 전환[j]: 현재 동영상에서 뒤로 10초 이동[l]: 현재 동영상에서 앞으로 10초 이동[m]: 동영상 음소거 또는 음소거 해제[0-9]: 동영상의 한 지점으로 이동(0은 동영상 시작 부분, 1은 동영상 10% 지점, 2는 동영상 20% 지점으로 이동하는 등의 방식)
    enablejsapi매개변수의 값을 1로 설정하면 IFrame 또는 JavaScript Player API 호출을 통해 플레이어가 제어됩니다. 기본값은 0이며 이 값을 사용하면 플레이어를 API로 제어할 수 없습니다. IFrame API 및 사용 방법에 대한 자세한 내용은 IFrame API 문서를 참조하세요. (JavaScript Player API는 지원 중단되었습니다.)
    end이 매개변수는 플레이어가 동영상 재생을 중지해야 할 시간을 동영상 시작 부분부터 초 단위로 측정하여 지정합니다. 매개변수 값은 양의 정수입니다. 시간은 동영상을 로드하거나 대기열에 넣기 위해 YouTube Player API 함수에서 사용하는 start 플레이어 매개변수 또는 startSeconds 매개변수의 값으로 측정되는 것이 아니라 동영상 시작 부분부터 측정됩니다.
    fs이 매개변수를 0으로 설정하면 전체 화면 버튼이 플레이어에 표시되지 않습니다. 기본값은 1이며 이 값을 사용하면 전체 화면 버튼이 표시됩니다.
    hl플레이어의 인터페이스 언어를 설정합니다. 이 매개변수는 값으로 ISO 639-1 두 자리 언어 코드 또는 완전하게 지정된 언어를 사용합니다. 예를 들어 fr 및 fr-ca는 모두 올바른 값입니다. IETF 언어 태그(BCP 47)와 같은 다른 언어 입력 코드도 올바르게 처리될 수 있습니다. 인터페이스 언어는 플레이어의 툴팁에 사용되며 기본 자막 트랙에도 영향을 줍니다. YouTube는 사용자의 개별 언어 환경설정과 자막 트랙의 사용 가능 여부에 따라 특정 사용자의 자막 트랙 언어를 다르게 선택할 수 있습니다.
    iv_load_policy매개변수의 값을 1로 설정하면 동영상 특수효과가 기본적으로 표시되며 3으로 설정하면 동영상 특수효과가 기본적으로 표시되지 않습니다. 기본값은 1입니다.
    listlist 매개변수는 listType 매개변수와 함께 플레이어에서 로드할 콘텐츠를 식별합니다.listType 매개변수 값이 search인 경우 list 매개변수 값이 검색어를 지정합니다.listType 매개변수 값이 user_uploads인 경우 list 매개변수 값이 로드할 동영상을 업로드한 YouTube 채널을 식별합니다.listType 매개변수 값이 playlist인 경우 list 매개변수 값이 YouTube 재생목록 ID를 지정합니다. 매개변수 값에서 아래 예에 표시된 것처럼 재생목록 ID 앞에 PL 문자를 붙여야 합니다. https://www.youtube.com/embed? listType=playlist &list=PLC77007E23FF423C6참고: list 및 listType 매개변수의 값을 지정하면 IFrame 삽입 URL에서 동영상 ID를 지정할 필요가 없습니다.
    listTypelistType 매개변수는 list 매개변수와 함께 플레이어에서 로드할 콘텐츠를 식별합니다. 유효한 매개변수 값은 playlist, search, user_uploads입니다. list 및 listType 매개변수 값을 지정하면 IFrame 삽입 URL에서 동영상 ID를 지정할 필요가 없습니다.
    loop단일 동영상 플레이어의 경우 1로 설정하면 플레이어가 첫 번째 동영상을 반복해서 재생합니다. 재생목록 플레이어(또는 맞춤 플레이어)에서는 플레이어가 전체 재생목록을 재생한 다음 첫 번째 동영상부터 다시 시작합니다. 지원되는 값은 0 및 1이며 기본값은 0입니다. 참고: 이 매개변수는 AS3 플레이어 및 AS3 또는 HTML5 플레이어를 로드할 수 있는 IFrame 삽입에서 제한적으로 지원됩니다. 현재 loop 매개변수는 playlist 매개변수와 함께 사용하는 경우에만 AS3 플레이어에서 작동합니다. 단일 동영상을 반복 재생하려면 loop 매개변수 값을 1로 설정하고 playlist 매개변수 값을 Player API URL에서 이미 지정한 동일한 동영상 ID로 설정합니다. https://www.youtube.com/v/**VIDEO_ID**? version=3 &loop=1 &playlist=**VIDEO_ID**
    modestbranding이 매개변수를 통해 YouTube 로고를 표시하지 않는 YouTube 플레이어를 사용할 수 있습니다. 매개변수 값을 1로 설정하면 YouTube 로고가 컨트롤바에 표시되지 않습니다. 하지만 사용자가 마우스 포인터를 플레이어 위에 올려놓으면 작은 YouTube 텍스트 라벨이 일시중지된 동영상의 오른쪽 상단에 표시됩니다.
    origin이 매개변수는 IFrame API에 추가 보안 수단을 제공하며 IFrame 삽입에서만 지원됩니다. enablejsapi 매개변수를 1로 설정하여 IFrame API를 사용하는 경우 도메인을 항상 origin 매개변수 값으로 지정해야 합니다.
    playlist이 매개변수는 재생할 동영상 ID의 쉼표로 구분된 목록을 지정합니다. 값을 지정하면 URL 경로에서 지정한 VIDEO_ID가 먼저 재생되며 playlist 매개변수에서 지정한 동영상이 그 후에 재생됩니다.
    playsinline이 매개변수는 iOS의 HTML5 플레이어에서 동영상을 인라인으로 재생할지 전체 화면으로 재생할지 여부를 제어합니다. 유효한 값은 다음과 같습니다.0: 이 값을 지정하면 전체 화면으로 재생됩니다. 현재 기본값이지만 기본값은 변경될 수 있습니다.1: 이 값을 지정하면 TRUE로 설정된 allowsInlineMediaPlayback 속성과 함께 만들어진 UIWebViews이 인라인으로 재생됩니다.
    rel참고: 이 매개변수는 2018년 9월 25일 이후에 변경됩니다. 변경 전까지 이 매개변수는 초기 동영상의 재생이 종료될 때 플레이어에서 관련 동영상을 표시할지 여부를 나타냅니다.매개변수 값을 기본값인 1로 설정하면 플레이어에 관련 동영상이 표시됩니다.매개변수 값을 0으로 설정하면 플레이어에 관련 동영상이 표시되지 않습니다.변경 후에는 관련 동영상을 사용 중지할 수 없게 됩니다. 대신 rel 매개변수를 0으로 설정하면 방금 동영상이 재생된 채널에서 관련 동영상을 가져옵니다.
    showinfo참고: 이 매개변수는 지원 중단되며 2018년 9월 25일 이후 무시됩니다. 지원되는 값은 0 및 1입니다. 매개변수 값을 0으로 설정하면 플레이어에서 동영상 재생을 시작하기 전에 동영상 제목 및 업로더와 같은 정보를 표시하지 않습니다. 플레이어가 재생목록을 로드하고 있고 매개변수 값을 명시적으로 1로 설정하면 로드 후 플레이어에 재생목록에 있는 동영상의 미리보기 이미지도 표시됩니다.
    start이 매개변수를 사용하면 플레이어가 동영상 시작 부분에서 특정 시간(단위: 초) 이후에 동영상 재생을 시작합니다. 매개변수 값은 양의 정수입니다. seekTo 함수와 마찬가지로 플레이어에서 지정한 시간에 가장 가까운 키프레임을 찾습니다. 즉, 재생 헤드에서 요청한 시간의 바로 앞 부분을 찾을 수도 있으며 일반적으로 2초 이내입니다.
    widget_referrer이 매개변수는 플레이어가 삽입된 URL을 식별합니다. YouTube 플레이어가 위젯에 삽입되고 이후 이 위젯이 웹페이지나 애플리케이션에 삽입되면 이 값이 YouTube 분석 보고에 사용됩니다. 이러한 시나리오에서는 origin 매개변수로 위젯 제공업체의 도메인이 식별되지만 YouTube 분석에서 위젯 제공업체를 실제 트래픽 소스로 식별하지 않습니다. 대신 YouTube 분석에서는 widget_referrer 매개변수 값을 사용해 트래픽 소스와 연결된 도메인을 식별합니다.

실제 적용

 <div
    class="card m-2 hover p-0"
    style="width: 20rem"
    :style="{ transform: scale }"
    @mouseover="changeThumnail"
    @mouseout="changeThumnail"
  >
    <img
      :src="video.snippet.thumbnails.medium.url"
      alt=""
      class="card-img-top"
      style="position: absolute"
      :style="{ display: show, opacity: op }"
    />
    <youtube
      id="123"
      :video-id="videoIds"
      :player-vars="playerVars"
      width="318"
      height="180"
    ></youtube>

    <div class="card-body">
      <p class="card-text">{{ video.snippet.title }}</p>
    </div>
  </div>


<script>
import Vue from "vue";
import VueYoutube from "vue-youtube";

Vue.use(VueYoutube);
export default {
  name: "VideoListItem",
  props: {
    video: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      show: "inline",                   # 썸네일의 표시 정보
      scale: "scale(1)",				# 카드의 스케일 정보
      videoIds: this.video.id.videoId,
      playerVars: {
        autoplay: 0,                    # 자동재생 X
        controls: 0,                    # 재생바 표시 X
        fs: 0,                          # 전체화면 버튼 표시 X
        cc_lang_pref: "ko",             # 자막 언어 설정
        cc_load_policy: 1,              # 자막 강제 적용 O
      },
    };
  },
  methods: {
    onSelectVideo: function () {
      this.$emit("select-video", this.video);
    },
    changeThumnail: function () {
      if (this.show === "none") {       # 썸네일이 안보일때 실행(마우스를 카드에서 땔때)
        this.show = "inline";			# 썸네일을 보이게
        this.scale = "scale(1)";        # 카드크기를 1배로
        this.$children[0].player.pauseVideo();    # 동영상 멈춤
      } else {                          # 썸네일에 마우스를 올랄 때
        this.show = "none";             # 썸네일 안보이게
        this.scale = "scale(1.2)";      # 카드 크기 확대
        this.$children[0].player.playVideo();     # 동영상 재생
      }
    },
  },
};
</script>

적용 CSS, JavaScript

  • 동영상 위에 썸네일을 position: absolute로 띄워 놓는다
  • @mouseover와 @mouseout 이벤트리스너를 카드에 적용하여 카드에 마우슬 올렸을때와 땠을 때 함수를 실행해 준다
  • 마우스오버시
    • 카드는 transform: scale(1.2) 옵션으로 1.2배로 키운다
    • 썸네일에 display: none 옵션을 줘 썸네일이 사라지고 동영상이 보이게 해준다.
    • this.$children[0].player.playVideo()으로 동영상이 재생되게 한다.
      • video 태그.player.playVideo()
      • 이벤트 리스너가 카드에서 선언 됬기 때문에 이함수의 this는 카드이다.
      • 동영상의 태그를 찾기위해 $children[0]을 사용했다. (vue 2에서만 가능 )
      • 대괄호는 몇번째 자식인지를 표현
    • z-index: 1 옵션으로 마우슬 올렸을때는 카드가 가장 앞에 놓이게 했다.
  • 마우스아웃 시
    • 카드 크기 정상화
    • 썸네일을 다시 동영상 위로 덮는다
    • this.$children[0].player.pauseVideo()으로 동영상 정지

CSS (style) 에 iframe{}으로 동영상에 직접 CSS효과를 넣을 수 있다.

iframe {
  pointer-events: none;    # 마우스 오버 이벤트 전부 없앰 (이벤트 발생 안함)
}

  • 주요 옵션

    • PropType(s)DefaultDescription
      widthNumber, String640iframe pixel width
      heightNumber, String360iframe pixel height
      resizeBooleanfalseiframe will proportionally scale height with its width
      resizeDelayNumber200Delay in milliseconds before running resize callback
      fitParentBooleanfalseiframe will use its parent's width

  • 인라인(props)로도 사용 가능

profile
ddullgi
프론트엔드개발자를 꿈꾸는 예비 개발자
이전 포스트

LF will be replaced by CRLF 에러

다음 포스트

실전 웹 성능 최적화 (feat. React) Part1

0개의 댓글