Queue Plugin

name: "queue"

Play sources one after the other, creating a playlist that can be managed dinamically.

repository: https://github.com/joaopaulovieira/clappr-queue-plugin

Usage

<template>
  <div>
    <v-clappr-player
      ref="clappr"
      id="queued-player"
      source="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
      width="100%"
      :queue="queue"
      :aspect-ratio="16 / 9"
    />
    <button @click="nextVideo">Next Video</button>
    <button @click="playPosition(3)">Play Number 3</button>
  </div>
</template>

<script>
import VClapprPlayer from 'v-clappr-player'

export default {
  components: {
    VClapprPlayer
  },
  computed: {
    queue () {
      return {
        nextVideos: [ // You can use different video formats
          'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
          '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
          'https://www.youtube.com/watch?v=fCUTX1jurJ4'
        ],
        autoPlayNextVideo: true
      }
    }
  },
  methods: {
    playPosition (index) {
      this.$refs.clappr.player.playQueuePosition(index)
    },
    nextVideo () {
      this.$refs.clappr.player.playNextVideoOnQueue()
    }
  }
}
</script>
Copy

See it working