一个简单的图层，让您可以在YouTube API上发挥想象力

VueYoutube (VueYoutube)

A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.

一个强大的API的简单组件。 vue-youtube提供了一个简单的图层，供您在使用YouTube IFrame Player API时发挥想象力。

View demo 查看演示 Download Source 下载源

vue-youtube is an wrapper of YouTube IFrame Player API (YIPA).

vue-youtube是YouTube IFrame Player API (YIPA)的包装。

What is the difference between other plugins? The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (onReady). Therefore, all function calls are queued and replayed only when player is ready.

其他插件之间有什么区别？ 区别在于，功能主体包含在promise中。 仅当播放器完成加载并准备开始接收API调用(onReady)时，才能兑现此承诺。 因此，仅当播放器准备就绪时，所有函数调用才会排队并重播。

You can do something like:

您可以执行以下操作：

export default {
  // ...
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  },
  methods: {
    async playVideo() {
      await this.player.playVideo()
      // Do something after the playVideo command
    }
  }
}

安装 (Installation)

npm install vue-youtube
# or
yarn add vue-youtube

用法 (Usage)

捆绑器(Webpack，汇总) (Bundler (Webpack, Rollup))

import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

浏览器 (Browser)

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-youtube/dist/vue-youtube.js"></script>

例 (Example)

<youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
<button @click="playVideo">play</button>

export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA'
    }
  },
  methods: {
    playVideo() {
      this.player.playVideo()
    },
    playing() {
      console.log('\o/ we are watching!!!')
    }
  },
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  }
}

or

要么

<youtube :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>

export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA',
      playerVars: {
        autoplay: 1
      }
    }
  },
  methods: {
    playing() {
      console.log('\o/ we are watching!!!')
    }
  }
}

大事记 (Events)

Event
ready
ended
playing
paused
buffering
cued
error

事件
准备
结束了
玩
已暂停
缓冲
提示
错误

播放器 (Player)

Example:

例：

<youtube video-id="lG0Ys-2d4MA" ref="youtube"></youtube>

export default {
  // ...
  methods: {
    playVideo() {
      this.$refs.youtube.player.playVideo()
    }
  }
}

API (API)

vm。$ youtube.getIdFromUrl (vm.$youtube.getIdFromUrl)

New in v1.2.0

v1.2.0的新功能

• Type: Function

  类型： Function

• Description: Parse a youtube url returning the video ID. (get-youtube-id)

  说明：解析YouTube网址并返回视频ID。 (get-youtube-id)

• Arguments:

  参数：

  • {String} url{String} url
  • {Object} options{Object} options

• Usage:

  用法：

...
  methods: {
    getId () {
      return this.$youtube.getIdFromUrl(this.video.url)
    }
  }
...

翻译自: https://vuejsexamples.com/a-simple-layer-for-you-to-use-your-imagination-while-over-the-youtube-api/