How to use the plyr.setup function in plyr

To help you get started, we’ve selected a few plyr examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github koel / app / app / services / playback.js View on Github external
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.
github koel / koel / resources / assets / js / services / playback.js View on Github external
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.
     */
github anyaudio / web / src / components / player / index.js View on Github external
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>
github redxtech / vue-plyr / src / plyr-video-slot.vue View on Github external
mounted () {
      if (this.$slots.default) {
        this.player = plyr.setup(document.getElementById(`plyr-video-container-${this.idNumber}`).childNodes[0],
          this.options)[0]
      } else {
        this.player = plyr.setup(document.getElementById(`js-player-video-${this.idNumber}`), this.options)[0]
      }
    },
    beforeDestroy () {
github OlivierCC / spfx-40-fantastics / src / webparts / mediaPlayer / MediaPlayerWebPart.ts View on Github external
else if (this.properties.player == 'video') {
      var captions = '';
      for (var i = 0; i &lt; this.properties.html5captions.length; i++) {
        var caption = this.properties.html5captions[i];
        captions += '<track srclang="' + caption['SrcLen'] + '" src="' + caption['Url'] + '" label="' + caption['Title'] + '" kind="captions">';
      }
      html += `
        <video controls="" poster="${this.properties.html5cover}">
          <source type="video/mp4" src="${this.properties.html5video}">
          ${captions}
        </video>
      `;
    }
    this.domElement.innerHTML = html;

    plyr.setup();
  }
github redxtech / vue-plyr / src / plyr-audio-slot.vue View on Github external
mounted () {
      if (this.$slots.default) {
        this.player = plyr.setup(document.getElementById(`plyr-audio-container-${this.idNumber}`).childNodes[0],
          this.options)[0]
      } else {
        this.player = plyr.setup(document.getElementById(`js-player-audio-${this.idNumber}`), this.options)[0]
      }
    },
    beforeDestroy () {
github redxtech / vue-plyr / src / plyr-video-slot.vue View on Github external
mounted () {
      if (this.$slots.default) {
        this.player = plyr.setup(document.getElementById(`plyr-video-container-${this.idNumber}`).childNodes[0],
          this.options)[0]
      } else {
        this.player = plyr.setup(document.getElementById(`js-player-video-${this.idNumber}`), this.options)[0]
      }
    },
    beforeDestroy () {
github redxtech / vue-plyr / src / plyr-audio-slot.vue View on Github external
mounted () {
      if (this.$slots.default) {
        this.player = plyr.setup(document.getElementById(`plyr-audio-container-${this.idNumber}`).childNodes[0],
          this.options)[0]
      } else {
        this.player = plyr.setup(document.getElementById(`js-player-audio-${this.idNumber}`), this.options)[0]
      }
    },
    beforeDestroy () {
github redxtech / vue-plyr / src / plyr-youtube-slot.vue View on Github external
mounted () {
      if (this.$slots.default) {
        this.player = plyr.setup(document.getElementById(`plyr-youtube-container-${this.idNumber}`).childNodes[0],
          this.options)[0]
      } else {
        this.player = plyr.setup(document.getElementById(`js-player-youtube-${this.idNumber}`), this.options)[0]
      }
    },
    beforeDestroy () {
github archivist / archivist / packages / source-context / SourceContext.js View on Github external
didMount() {
    let pl = plyr.setup()
    this.player = pl[0]
    this.player.on('ready', () => {
      this._onPlayerLoad()
    })
  }

plyr

A simple, accessible and customizable HTML5, YouTube and Vimeo media player

MIT
Latest version published 1 year ago

Package Health Score

70 / 100
Full package analysis