vue-youtube で再生開始時間を指定する方法

Published: 2022/10/9

Vue にて Youtube の埋め込みを行おうとすると、 vue-youtube を利用することになる。再生開始時間の指定は、どうやったら行えるのかがイマイチ自明ではなかったので、それについてのメモ。

<template>
  <VueYoutube :video-id="videoId" :player-vars="playerVars" />
</template>

<script lang="ts">
import Vue from 'vue'
import { Youtube } from 'vue-youtube'

export default Vue.extend({
  components: { VueYoutube },
  props: {
    videoId: {
      type: String,
      required: true
    },
    start: {
      type: String,
      default: null
    }
  },
  computed: {
    playerVars() {
      return this.start ? { start: this.start } : {}
    }
  }
})
</script>

上記のように、 player-vars の prop を vue-youtube のコンポーネントに引き渡し、そこで start のフィールドに、再生開始時間を秒数で指定すれば良い。

この player-vars は、下記のリンクにある、プレーヤーURL自身に対するパラメーターを指定するのに利用されている模様。

YouTube Embedded Players and Player Parameters | YouTube IFrame Player API | Google Developers

developers.google.com