A Vue component for the plyr video & audio player.

Overview

vue-plyr

github_actions npm last version Dependabot status

Changelog

A vue component for the plyr video & audio player.

This is useful for when you want a nice video player in your Vue app.

It uses plyr by sampotts for the players.

Supported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.

Demo

A demo of the components (equivalent to the html example include here) can be found at skjnldsv.github.io/vue-plyr.

Installation

npm i vue-plyr # or yarn add vue-plyr

Module

// In your main vue file - the one where you create the initial vue instance.
import Vue from 'vue'
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'

// Vue 3.x
// The second argument is optional and sets the default config values for every player.
createApp(App)
  .use(VuePlyr, {
    plyr: {}
  })
  .mount('#app')

// Vue 2.x
// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
  plyr: {}
})

SSR (more below)

For SSR, you can import the SSR optimized module, found at dist/vue-plyr.ssr.js. There is a more in depth description on how to use it with nuxt below.

Browser

In the browser you can include it as you would any other package with unpkg, along with the stylesheet:

">
<script type="text/javascript" src="https://unpkg.com/vue">script>
<script type="text/javascript" src="https://unpkg.com/@skjnldsv/vue-plyr">script>
<link rel="stylesheet" href="https://unpkg.com/@skjnldsv/vue-plyr/dist/vue-plyr.css" />


<script>
  window.Vue.createApp(VuePlyr).mount('#app')
script>

Usage

Once installed, it can be used in a template as simply as:

">

<vue-plyr :options="options">
  <video
    controls
    crossorigin
    playsinline
    data-poster="poster.jpg"
  >
    <source
      size="720"
      src="/path/to/video-720p.mp4"
      type="video/mp4"
    />
    <source
      size="1080"
      src="/path/to/video-1080p.mp4"
      type="video/mp4"
    />
    <track
      default
      kind="captions"
      label="English captions"
      src="/path/to/english.vtt"
      srclang="en"
    />
  video>
vue-plyr>


<vue-plyr>
  <audio controls crossorigin playsinline>
    <source
        src="/path/to/audio.mp3"
        type="audio/mp3"
    />
    <source
        src="/path/to/audio.ogg"
        type="audio/ogg"
    />
  audio>
vue-plyr>


<vue-plyr>
  <div class="plyr__video-embed">
    <iframe
      src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    >iframe>
  div>
vue-plyr>


<vue-plyr>
  <div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
vue-plyr>


<vue-plyr>
  <div class="plyr__video-embed">
    <iframe
      src="https://player.vimeo.com/video/143418951?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    >iframe>
  div>
vue-plyr>


<vue-plyr>
  <div data-plyr-provider="vimeo" data-plyr-embed-id="143418951">div>
vue-plyr>

Player Instance

To access the player instance, you can use the player property from the refs attribute.

... ">
<template>
  <vue-plyr ref="plyr">...vue-plyr>
template>

<script>
  export default {
    name: 'Component',
    mounted () {
      console.log(this.$refs.plyr.player)
    }
  }
script>

Examples

Examples of how to use this app can be found here.

Events

If you want to capture events from the plyr instance, you can do so by accessing the player instance through the ref attribute and using that object for events, as you would with a vanilla plyr instance.

Valid events are here.

... ">
<template>
  <vue-plyr ref="plyr">...vue-plyr>
template>
<script>
  export default {
    name: 'Component',
    mounted () {
      this.$refs.plyr.player.on('event', () => console.log('event fired'))
    }
script>

Options

For custom options you can pass an options prop which is an object that will be passed to the new Plyr() creation. Available options here. I have added a new option (hideYouTubeDOMError) that hides the error that is always logged when destroying a YouTube player. It defaults to true, and you can disable it and see the error by setting it to false.

You can also specify the default options when registering the plugin (these will be ignored if you specify a player-specific options object via props):

createApp(App).use(VuePlyr, {
  plyr: {}
})

SSR

Nuxt (Vue 2.x)

This should support SSR out of the box. For nuxt, create a file called vue-plyr.js in your plugins folder containing only these three statements:

import Vue from 'vue'
import VuePlyr from '@skjnldsv/vue-plyr/dist/vue-plyr.ssr.js'
import '@skjnldsv/vue-plyr/dist/vue-plyr.css'

// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
  plyr: {}
})

Then, in your nuxt.config.js file add { src: '~/plugins/vue-plyr', mode: 'client' } to the plugins array. The vue-plyr element should be globally registered now.

The nuxt.config.js file should at minimum include this:

export default {
  plugins: [{ src: '~/plugins/vue-plyr', mode: 'client' }]
}

Author

vue-plyr © RedXTech, Released under the MIT License.

Comments
  • Error with post css

    Error with post css

    I got the same issue from there : https://github.com/redxtech/vue-plyr/issues/359 if you want to try your self : https://github.com/riderx/indiemakerfr

    bug 
    opened by riderx 4
  • Bump core-js from 3.18.1 to 3.23.1

    Bump core-js from 3.18.1 to 3.23.1

    Bumps core-js from 3.18.1 to 3.23.1.

    Changelog

    Sourced from core-js's changelog.

    3.23.1 - 2022.06.14
    • Fixed possible error on multiple core-js copies, #1091
    • Added v flag to RegExp.prototype.flags implementation in case if current V8 bugs will not be fixed before this flag implementation
    3.23.0 - 2022.06.14
    • Array find from last moved to the stable ES, according to June 2022 TC39 meeting:
      • Array.prototype.findLast
      • Array.prototype.findLastIndex
      • %TypedArray%.prototype.findLast
      • %TypedArray%.prototype.findLastIndex
    • Methods from the Array grouping proposal renamed, according to June 2022 TC39 meeting:
      • Array.prototype.groupBy -> Array.prototype.group
      • Array.prototype.groupByToMap -> Array.prototype.groupToMap
    • Changed the order of operations in %TypedArray%.prototype.with following proposal-change-array-by-copy/86, according to June 2022 TC39 meeting
    • Decorator Metadata proposal extracted from Decorators proposal as a separate stage 2 proposal, according to March 2022 TC39 meeting, Symbol.metadataKey replaces Symbol.metadata
    • Added Array.prototype.push polyfill with some fixes for modern engines
    • Added Array.prototype.unshift polyfill with some fixes for modern engines
    • Fixed a bug in the order of getting flags in RegExp.prototype.flags in the actual version of V8
    • Fixed property descriptors of some Math and Number constants
    • Added a workaround of V8 ArrayBufferDetaching protector cell invalidation and performance degradation on structuredClone feature detection, one more case of #679
    • Added detection of NodeJS bug in structuredClone that can not clone DOMException (just in case for future versions that will fix other issues)
    • Compat data:
      • Added NodeJS 18.3 compat data mapping
      • Added and fixed Deno 1.22 and 1.21 compat data mapping
      • Added Opera Android 69 compat data mapping
      • Updated Electron 20.0 compat data mapping
    3.22.8 - 2022.06.02
    • Fixed possible multiple call of ToBigInt / ToNumber conversion of the argument passed to %TypedArray%.prototype.fill in V8 ~ Chrome < 59, Safari < 14.1, FF < 55, Edge <=18
    • Fixed some cases of DeletePropertyOrThrow in IE9-
    • Fixed the kind of error (TypeError instead of Error) on incorrect exec result in RegExp.prototype.test polyfill
    • Fixed dependencies of { actual, full, features }/typed-array/at entries
    • Added Electron 20.0 compat data mapping
    • Added iOS Safari 15.5 compat data mapping
    • Refactoring
    3.22.7 - 2022.05.24
    • Added a workaround for V8 ~ Chrome 53 bug with non-writable prototype of some methods, #1083
    3.22.6 - 2022.05.23
    • Fixed possible double call of ToNumber conversion on arguments of Math.{ fround, trunc } polyfills
    • Array.prototype.includes marked as fixed in FF102
    3.22.5 - 2022.05.10
    • Ensured that polyfilled constructors .prototype is non-writable
    • Ensured that polyfilled methods .prototype is not defined
    • Added detection and fix of a V8 ~ Chrome <103 bug of struturedClone that returns null if cloned object contains multiple references to one error
    3.22.4 - 2022.05.03
    • Ensured proper .length of polyfilled functions even in compressed code (excepting some ancient engines)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Failed to resolve component: vue-plyr

    Failed to resolve component: vue-plyr

    When installing the package and registering them in NUXT 3 rc 08 it works perfectly but when running the project it generates a message: Failed to resolve component: vue-plyr which I would like to know, is there no need to do anything else?

    and I used this example to base myself example: https://github.com/redxtech/vue-plyr/tree/master/examples/nuxt image

    opened by IvanPerezChan 2
  • Bump @nextcloud/eslint-config from 8.0.0 to 8.1.2

    Bump @nextcloud/eslint-config from 8.0.0 to 8.1.2

    Bumps @nextcloud/eslint-config from 8.0.0 to 8.1.2.

    Release notes

    Sourced from @​nextcloud/eslint-config's releases.

    v8.1.2

    Fixed

    • Also update eslint-config-n custom rules #381

    v8.1.1

    Fixed

    • Fix node plugin usage #379

    v8.1.0

    Changed

    Changelog

    Sourced from @​nextcloud/eslint-config's changelog.

    v8.1.2 (2022-08-09)

    Full Changelog

    Dependency updates:

    Commits
    • 56b5b8a 8.1.2
    • 80f238a Merge pull request #381 from nextcloud/fix/n-rules
    • 1a5a313 Also update eslint-config-n custom rules
    • 66b1d6b 8.1.1
    • 4605723 Merge pull request #379 from nextcloud/fix/eslint-plugin-n
    • 06da4e9 Fix node plugin usage
    • 21497a9 Merge pull request #378 from nextcloud/feat/package-node-npm-engines-update
    • 2d1cb92 Update npm and node engines versions
    • 4a076e6 Merge pull request #377 from nextcloud/feat/workflow-auto-update-dependabot-a...
    • 8bf7739 Updating dependabot-approve-merge.yml workflow from template
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot will merge this PR once CI passes on it, as requested by @skjnldsv.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • Bump @rollup/plugin-node-resolve from 10.0.0 to 11.2.1

    Bump @rollup/plugin-node-resolve from 10.0.0 to 11.2.1

    Bumps @rollup/plugin-node-resolve from 10.0.0 to 11.2.1.

    Commits
    • 7426b1e chore(release): node-resolve v11.2.1
    • 312fbc2 fix(node-resolve): fs.exists is incorrectly promisified (#835)
    • 2d06c44 feat(commonjs)!: Add ignore-dynamic-requires option (#819)
    • 8752c2f docs(replace): document the values option (#814)
    • 4f4c25d fix(typescript): bump TypeScript version (#818)
    • f1ad31f fix(typescript): update readme and peerDeps version (#830)
    • a69e85d fix(commonjs): isRestorableCompiledEsm should also trigger code transform (...
    • 4a11bbd chore(release): replace v2.4.1
    • 659ed59 fix(replace): add missing types for new preventAssignment option (#813)
    • fbcb8f2 chore(release): replace v2.4.0
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot will merge this PR once it's up-to-date and CI passes on it, as requested by @skjnldsv.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • Build Fails on Vite 3

    Build Fails on Vite 3

    I followed vite example but yarn run build command fails.

    package.json

    "dependencies": {
        "@skjnldsv/vue-plyr": "^7.3.0",
        "axios": "^1.1.3",
        "dayjs": "^1.11.6",
        "pinia": "^2.0.23",
        "vue": "^3.2.41",
        "vue-router": "^4.1.5"
      },
     "devDependencies": {
        "@vitejs/plugin-vue": "^3.1.2",
        "autoprefixer": "^10.4.13",
        "cypress": "^10.10.0",
        "postcss": "^8.4.18",
        "start-server-and-test": "^1.14.0",
        "tailwindcss": "^3.2.2",
        "vite": "^3.1.8"
      }
    

    main.js related parts

    import VuePlyr from "@skjnldsv/vue-plyr";
    import "@skjnldsv/vue-plyr/dist/vue-plyr.css";
    
    app.use(createPinia()).use(router).use(VuePlyr, {
    plyr: {},
    });
    
    opened by Amirreza-Ghasemkhani 1
  • Bump vue from 3.2.41 to 3.2.45

    Bump vue from 3.2.41 to 3.2.45

    Bumps vue from 3.2.41 to 3.2.45.

    Release notes

    Sourced from vue's releases.

    v3.2.45

    Please refer to CHANGELOG.md for details.

    v3.2.44

    Please refer to CHANGELOG.md for details.

    v3.2.43

    Please refer to CHANGELOG.md for details.

    v3.2.42

    Please refer to CHANGELOG.md for details.

    Changelog

    Sourced from vue's changelog.

    3.2.45 (2022-11-11)

    Bug Fixes

    • compiler/v-model: catch incorrect v-model usage on prop bindings (001184e), closes #5584
    • custom-elements: also dispatch hyphenated version of emitted events (#5378) (0b39e46), closes #5373
    • custom-elements: custom element should re-instantiate when inserted again (#6966) (67890da), closes #6934
    • custom-elements: define declared properties in constructor (#5328) (55382ae)
    • custom-elements: ensure custom elements can inherit provides from ancestors (#5098) (192dcb6), closes #5096
    • custom-elements: fix event emitting for async custom elements (#5601) (665f2ae), closes #5599
    • custom-elements: fix number type props casting check (89f37ce), closes #5793 #5794
    • custom-elements: properties set pre-upgrade should not show up in $attrs (afe8899)
    • custom-elements: respect slot props in custom element mode (ffef822)
    • custom-elements: should not reflect non-decalred properties set before upgrade (5e50909)
    • hmr/keep-alive: fix error in reload component (#7049) (a54bff2), closes #7042
    • runtime-core: fix move/removal of static fragments containing text nodes (#6858) (4049ffc), closes #6852
    • sfc: also generate getter for import bindings during dev (0594400)
    • sfc: ensure <script setup> binding behavior consistency on this between prod and dev (f73925d), closes #6248
    • sfc: ensure consistent dev/prod behavior for non-reactive variables declared in <script setup> (5a3d45a), closes #5655
    • teleport/css-v-bind: fix css v-bind for teleported content (42239cf), closes #4605 #4609
    • teleport/css-v-bind: fix css v-bind in teleport in child component slot (11214ee)
    • v-model: fix incorrect codegen for non-ref bindings (15e889a), closes #6241

    3.2.44 (2022-11-09)

    Bug Fixes

    • watch: for immediate watch with single source, ensure cb is called with undefined as oldValue (#7075) (5dc593b), closes #7074

    3.2.43 (2022-11-09)

    Bug Fixes

    • watch: ensure oldValue in multi-source watcher is always an array (23e85e2), closes #7070

    3.2.42 (2022-11-09)

    Bug Fixes

    • compiler-core/v-on: only apply case preservation on native elements (#6902) (5bfe438), closes #6900

    ... (truncated)

    Commits
    • 6f663d4 release: v3.2.45
    • 24964da test: test case for #6966
    • 67890da fix(custom-elements): custom element should re-instantiate when inserted agai...
    • ffef822 fix(custom-elements): respect slot props in custom element mode
    • 55382ae fix(custom-elements): define declared properties in constructor (#5328)
    • 89f37ce fix(custom-elements): fix number type props casting check
    • afe8899 fix(custom-elements): properties set pre-upgrade should not show up in $attrs
    • 5e50909 fix(custom-elements): should not reflect non-decalred properties set before u...
    • 665f2ae fix(custom-elements): fix event emitting for async custom elements (#5601)
    • 0b39e46 fix(custom-elements): also dispatch hyphenated version of emitted events (#5378)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot will merge this PR once it's up-to-date and CI passes on it, as requested by @skjnldsv.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • Bump vue from 3.2.41 to 3.2.45 in /examples/vue-cli

    Bump vue from 3.2.41 to 3.2.45 in /examples/vue-cli

    ⚠️ Dependabot is rebasing this PR ⚠️

    Rebasing might not happen immediately, so don't worry if this takes some time.

    Note: if you make any changes to this PR yourself, they will take precedence over the rebase.


    Bumps vue from 3.2.41 to 3.2.45.

    Release notes

    Sourced from vue's releases.

    v3.2.45

    Please refer to CHANGELOG.md for details.

    v3.2.44

    Please refer to CHANGELOG.md for details.

    v3.2.43

    Please refer to CHANGELOG.md for details.

    v3.2.42

    Please refer to CHANGELOG.md for details.

    Changelog

    Sourced from vue's changelog.

    3.2.45 (2022-11-11)

    Bug Fixes

    • compiler/v-model: catch incorrect v-model usage on prop bindings (001184e), closes #5584
    • custom-elements: also dispatch hyphenated version of emitted events (#5378) (0b39e46), closes #5373
    • custom-elements: custom element should re-instantiate when inserted again (#6966) (67890da), closes #6934
    • custom-elements: define declared properties in constructor (#5328) (55382ae)
    • custom-elements: ensure custom elements can inherit provides from ancestors (#5098) (192dcb6), closes #5096
    • custom-elements: fix event emitting for async custom elements (#5601) (665f2ae), closes #5599
    • custom-elements: fix number type props casting check (89f37ce), closes #5793 #5794
    • custom-elements: properties set pre-upgrade should not show up in $attrs (afe8899)
    • custom-elements: respect slot props in custom element mode (ffef822)
    • custom-elements: should not reflect non-decalred properties set before upgrade (5e50909)
    • hmr/keep-alive: fix error in reload component (#7049) (a54bff2), closes #7042
    • runtime-core: fix move/removal of static fragments containing text nodes (#6858) (4049ffc), closes #6852
    • sfc: also generate getter for import bindings during dev (0594400)
    • sfc: ensure <script setup> binding behavior consistency on this between prod and dev (f73925d), closes #6248
    • sfc: ensure consistent dev/prod behavior for non-reactive variables declared in <script setup> (5a3d45a), closes #5655
    • teleport/css-v-bind: fix css v-bind for teleported content (42239cf), closes #4605 #4609
    • teleport/css-v-bind: fix css v-bind in teleport in child component slot (11214ee)
    • v-model: fix incorrect codegen for non-ref bindings (15e889a), closes #6241

    3.2.44 (2022-11-09)

    Bug Fixes

    • watch: for immediate watch with single source, ensure cb is called with undefined as oldValue (#7075) (5dc593b), closes #7074

    3.2.43 (2022-11-09)

    Bug Fixes

    • watch: ensure oldValue in multi-source watcher is always an array (23e85e2), closes #7070

    3.2.42 (2022-11-09)

    Bug Fixes

    • compiler-core/v-on: only apply case preservation on native elements (#6902) (5bfe438), closes #6900

    ... (truncated)

    Commits
    • 6f663d4 release: v3.2.45
    • 24964da test: test case for #6966
    • 67890da fix(custom-elements): custom element should re-instantiate when inserted agai...
    • ffef822 fix(custom-elements): respect slot props in custom element mode
    • 55382ae fix(custom-elements): define declared properties in constructor (#5328)
    • 89f37ce fix(custom-elements): fix number type props casting check
    • afe8899 fix(custom-elements): properties set pre-upgrade should not show up in $attrs
    • 5e50909 fix(custom-elements): should not reflect non-decalred properties set before u...
    • 665f2ae fix(custom-elements): fix event emitting for async custom elements (#5601)
    • 0b39e46 fix(custom-elements): also dispatch hyphenated version of emitted events (#5378)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot will merge this PR once it's up-to-date and CI passes on it, as requested by @skjnldsv.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • Bump @rollup/plugin-commonjs from 22.0.2 to 23.0.0

    Bump @rollup/plugin-commonjs from 22.0.2 to 23.0.0

    Bumps @rollup/plugin-commonjs from 22.0.2 to 23.0.0.

    Changelog

    Sourced from @​rollup/plugin-commonjs's changelog.

    v23.0.0

    2022-10-09

    Breaking Changes

    • fix: prepare for Rollup 3 #1300
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • Bump @rollup/plugin-node-resolve from 13.3.0 to 15.0.0

    Bump @rollup/plugin-node-resolve from 13.3.0 to 15.0.0

    Bumps @rollup/plugin-node-resolve from 13.3.0 to 15.0.0.

    Changelog

    Sourced from @​rollup/plugin-node-resolve's changelog.

    v15.0.0

    2022-10-10

    Breaking Changes

    • fix: prepare for Rollup 3 #1288

    v14.1.0

    2022-09-12

    Features

    • feat: add new option, modulePaths (#1104)

    v14.0.1

    2022-09-08

    Bugfixes

    • fix: handle circular commonjs (#1259)

    v14.0.0

    2022-09-06

    Breaking Changes

    • fix: preserve moduleSideEffects when re-resolving files (#1245)
    Commits
    • e4d21ba refactor(node-resolve): remove deep-freeze from dependencies (#529)
    • 621768b feat(commonjs)!: return the namespace by default when requiring ESM (#507)
    • e632469 chore(node-resolve): update dependencies
    • 84dfddb chore(node-resolve): clean up changelog
    • 3fa649d chore(release): node-resolve v8.4.0
    • a582b59 chore(release): node-resolve v8.3.0
    • a60cb76 chore(release): node-resolve v8.2.0
    • ec92d34 feat(node-resolve): preserve search params and hashes (#487)
    • 56b3725 feat(node-resolve): support .js imports in TypeScript (#480)
    • 5e518a4 docs(node-resolve): fix named export use in readme (#456)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • Bump @rollup/plugin-node-resolve from 13.3.0 to 14.1.0

    Bump @rollup/plugin-node-resolve from 13.3.0 to 14.1.0

    Bumps @rollup/plugin-node-resolve from 13.3.0 to 14.1.0.

    Changelog

    Sourced from @​rollup/plugin-node-resolve's changelog.

    v14.1.0

    2022-09-12

    Features

    • feat: add new option, modulePaths (#1104)

    v14.0.1

    2022-09-08

    Bugfixes

    • fix: handle circular commonjs (#1259)

    v14.0.0

    2022-09-06

    Breaking Changes

    • fix: preserve moduleSideEffects when re-resolving files (#1245)
    Commits
    • 509d031 chore(release): node-resolve v14.1.0
    • 12d87a4 feat(node-resolve): add new option, modulePaths (#1104)
    • a43a6d6 chore(release): node-resolve v14.0.1
    • 5cf48e9 fix(node-resolve): handle circular commonjs (#1259)
    • 81e2985 chore(release): node-resolve v14.0.0
    • 886deba fix(node-resolve): preserve moduleSideEffects when re-resolving files (#1245)
    • 173b410 chore(release): node-resolve v13.3.0
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • Error when updating reactive video id

    Error when updating reactive video id

    Hi, ive already posted a comment on the "old" repo, but seeing that it had little to no activity over the last 2 years ill ask here again :) Essentially, I have this simple template:

    <template>
      <vue-plyr id='player' :key="vid">
        <div data-plyr-provider="youtube" :data-plyr-embed-id="vid" />
      </vue-plyr>
    </template>
    <script setup lang='ts'>
    
    const props = defineProps<{
      vid: string;
    }>();
    

    Now, vid changes, and the entire app pretty much breaks. I get this error in console:

    Uncaught (in promise) TypeError: can't access property "insertBefore", parent is null
    

    I've isolated the issue to this component. Any help is appreciated :)

    bug 
    opened by AnnikenYT 9
Releases(v7.3.0)
A vue hls video player plugin using video.js 7

vue-videojs7 A vue video.js7 plugin, so you can play hls video(m3u8 format) within html5 easily

Walter Hu 81 Oct 19, 2022
A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player!

vue3-player-video A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player! If you have a pro

Enzo Esteves ⚡ 34 Sep 15, 2022
A beautiful Audio Player Component for Vue3

What is vue3-audio-player? This is a beautiful Audio Player Component for Vue3. Installation npm i vue3-audio-player Usage In your *.vue, you shall im

CoolSnow 17 Nov 17, 2022
▶️ 🎹 🎵 HTML5 audio tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc

Vue.js sound player Vue.js sound audio player UI. Covers audio-tag API and adds more. Demo See DEMO here Installation Use npm: npm install vue-audio -

Mikhail Kuznetcov 172 Aug 25, 2022
:stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: Easy to create custom audio player components for Vue. 一个有灵魂的进度条。 A progress bar with soul.

vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件,非常感谢您的 star! Simple, f

JasonYu 105 Nov 28, 2022
A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components

vue-howler A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components Installation $ npm install vue-howler Usage First c

Mick Dekkers 104 Oct 6, 2022
Web pages based on HTML 5 audio music player

Web pages based on HTML 5 < audio > music player demo // demo已停止 Requirements vue ^2.3.3 vue-resource ^1.3.4 v-click-outside ^0.0.8 Installation npm i

张啸 24 Nov 24, 2022
A audio player based on Howler.js

vue-dynamic-island-player Description a vue-audio-player based on Howler.js,The animation of the player is interacted with reference to IOS dynamic is

zack8756 4 Dec 1, 2022
📼 A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.

vue-video-section A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them. Links View demo View on

John Datserakis 31 Nov 23, 2022
📹 A Vue 2.x video player component based on DPlayer

Vue-DPlayer A Vue 2.x video player component based on DPlayer. Live Demo Install npm install vue-dplayer -S Usage CDN: https://unpkg.com/[email protected]

MoePlayer 600 Nov 15, 2022
A hml5 video player vue component

vue-player author - Artur Sena license - MIT Intro This is a html5 video component made in VueJS with to quickly add videos with placeholders and intr

Artur Sena 20 Nov 24, 2022
Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player

vue-playlist Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player This is

misha. 26 Nov 24, 2022
A html5 video player component of vue

A html5 video player component of vue. Include video controller / video preview / power progress bar and so on

hhliu 0 Jul 16, 2020
Record video or snapshots from device cameras or desktop. Upload and download of video or snapshots is supported.

Multicorder Record video from cameras Record video from desktop screens Playback recordings Take snapshots of video Download videos or snapshots Demo

Brian Winkers 12 Jul 12, 2022
An example video conferencing app built in VueJS 3 using the SignalWire Video API

An example video conferencing app built in VueJS 3 using the SignalWire Video API and SignalWire Javascript SDK with reuseable components.

SignalWire 2 Mar 23, 2022
🍟 A Lightweight Video Player For Vue.js.

vue-core-video-player A Lightweight Video Player For Vue.js. Get Started Npm $ npm install vue-core-video-player --save Yarn $ yarn add vue-core-video

core-player 367 Nov 12, 2022
A Vue.js based video player with good look and custom user config

Awesome-Video-Player A Vue.js based video player with good look and custom user config ✅ good-looking & support custom config ✅ Vue 2 & Vue 3 Support

Ziwen Mei 98 Nov 22, 2022
A vue-core-video-player plugin for HLS Decoding.

playcore-hls A vue-core-video-player plugin for HLS Decoding. Get Started $ npm install vue-core-video-player --save $ npm install @core-player/playco

core-player 4 Nov 16, 2021
Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Seerat Awan 33 Oct 27, 2022