How to use plyr - 10 common examples

init(app) {
        // We don't need to init this service twice, or the media events will be duplicated.
        if (this.initialized) {
            return;
        }

        this.app = app;

        this.player = plyr.setup({
            controls: [],
        })[0];

        this.audio = $('audio');

        this.$volumeInput = $('#volumeRange');

        /**
         * Listen to 'error' event on the audio player and play the next song if any.
         */
        document.querySelector('.plyr').addEventListener('error', e => {
            this.playNext();
        }, true);

        /**
         * Listen to 'ended' event on the audio player and play the next song in the queue.

mounted() {
    // initiate video player
    this.player = new Plyr(this.$refs.fmVideo);
    // load source
    this.player.source = {
      type: 'video',
      title: this.videoFile.filename,
      sources: [{
        src: `${this.$store.getters['fm/settings/baseUrl']}stream-file?disk=${this.selectedDisk}&path=${encodeURIComponent(this.videoFile.path)}`,
        type: `audio/${this.videoFile.extension}`,
      }],
    };
  },
  beforeDestroy() {

mounted () {
    // eslint-disable-next-line
    new Plyr('audio', {
      controls: this.options
    })
  }
}

this.$nextTick(() => {
                        this.player = new Plyr(this.$refs.player, {
                            title: this.file.name,
                            ratio: '16:9',
                            controls: [
                                'play-large',   // The large play button in the center
                                'restart',      // Restart playback
                                'play',         // Play/pause playback
                                'progress',     // The progress bar and scrubber for playback and buffering
                                'current-time', // The current time of playback
                                'duration',     // The full duration of the media
                                'mute',         // Toggle mute
                                'volume',       // Volume control
                                'captions',     // Toggle captions
                                'settings',     // Settings menu
                                'pip',          // Picture-in-picture (currently Safari only)
                                'airplay',      // Airplay (currently Safari only)
                                'fullscreen',   // Toggle fullscreen

let t = setInterval(() => {
                    let item = document.querySelector('[data-player]')

                    if (item) {
                        let plr = this.player.item = new Plyr(item, options)

                        // status
                        plr.on('playing', (e) => {
                            this.player.playing = true
                        })
                        plr.on('pause', (e) => {
                            this.player.playing = false
                        })

                        // fs
                        plr.on('enterfullscreen', (e) => {
                            this.player.fs = true
                            document.querySelector('[data-plyr="fullscreen"]').blur()
                        })
                        plr.on('exitfullscreen', (e) => {
                            this.player.fs = false

init () {
    // We don't need to init this service twice, or the media events will be duplicated.
    if (this.initialized) {
      return
    }

    this.player = plyr.setup({
      controls: []
    })[0]

    this.audio = document.querySelector('audio')
    this.volumeInput = document.getElementById('volumeRange')

    const player = document.querySelector('.plyr')

    /**
     * Listen to 'error' event on the audio player and play the next song if any.
     */
    player.addEventListener('error', () => this.playNext(), true)

    /**
     * Listen to 'ended' event on the audio player and play the next song in the queue.
     */

componentDidMount() {
    // Adding keydown event listener to window element
    window.addEventListener('keydown', (e) => this.handleKeyboardEvents(e));

    // Audio player configuration
    plyr.setup({
      html: [
        "<div class="plyr__controls">",
        "<span class="plyr__progress">",
        "<label class="plyr__sr-only" for="seek{id}">Seek</label>",
        "<input data-plyr="seek" value="0" step="0.1" max="100" min="0" type="range" class="plyr__progress--seek" id="seek{id}">",
        "<progress role="presentation" value="0" max="100" class="plyr__progress--played"></progress>",
        "<progress value="0" max="100" class="plyr__progress--buffer">",
        "<span>0</span>% buffered",
        "</progress>",
        "<span class="plyr__tooltip">00:00</span>",
        "</span>",
        "<button data-plyr="play" type="button">",
        `<img alt="/" src="${playIcon}">`,
        "<span class="plyr__sr-only">Play</span>",
        "</button>",
        "<button data-plyr="pause" type="button">",</button></div>

mounted () {
      this.player = new Plyr(this.$el.firstChild, this.opts)
      this.$emit('player', this.player)
      this.emit.forEach(element => {
        this.player.on(element, this.emitPlayerEvent)
      })
    },
    beforeDestroy () {

mounted () {
      this.player = new Plyr(this.$el.firstChild, this.opts)
      this.$emit('player', this.player)
      this.emit.forEach(element => {
        this.player.on(element, this.emitPlayerEvent)
      })
    },
    beforeDestroy () {

function setupPlyr(el) {
    let player = new Plyr(el, {
      debug: !IS_PRODUCTION,
      controls:
        ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions']
      ,
      fullscreen: {
        enabled: false
      },
      storage: {
        enabled: true,
        key: 'tana'
      }
    });
  }