Request for Vue 3 Support in Plyr.io

[esg-ammar-alrez]

Dear Plyr.io Team,

I hope you are doing well.

I am currently working on a project using Vue 3 and would love to integrate Plyr.io for media playback. However, I couldn't find clear documentation on Vue 3 compatibility.

Could you please confirm if Plyr.io officially supports Vue 3? If not, are there any plans for future support?

[TwT-L]

// components/videoplayer/VideoPlayer.vue
<script setup>
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';
import { ref, defineProps, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  src: String,
});
const player = ref();
const playerId = `video-player-${Math.random().toString(36).substr(2, 9)}`; // generate unique ID

const createPlayer = (source, cover) => {
  player.value = new Plyr(`#${playerId}`, {
    controls: [
      'play-large',
      'play',
      'progress',
      'current-time',
      'mute',
      'volume',
      'captions',
      'fullscreen',
    ],
  });
  player.value.on('enterfullscreen', () => {
    console.log('enterfullscreen');
  });
  player.value.on('exitfullscreen', () => {
    console.log('exitfullscreen');
  });
};

onMounted(() => {
  createPlayer();
});
onUnmounted(() => {
  player.value.destroy();
});
</script>
<template>
  <video
    :src="src"
    :id="playerId"
    crossorigin
    playsinline
    data-plyr-config="{}"
  ></video>
</template>

[esg-ammar-alrez]

@TwT-L

how i can pass provider for (youtube or vimeo )
i am tried but i am fail
it work by ifram
thank you

<script setup>
import { ref, defineProps, onMounted, onUnmounted, watch } from 'vue';
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';

const props = defineProps({
  src: String, // YouTube video ID (e.g., "bTqVqk7FSmY")
});

const player = ref(null);
const playerElement = ref(null); // Reference to the video element

const createPlayer = () => {
  if (player.value) {
    player.value.destroy();
  }

  if (playerElement.value) {
    player.value = new Plyr(playerElement.value, {
      controls: [
        'play-large',
        'play',
        'progress',
        'current-time',
        'mute',
        'volume',
        'captions',
        'fullscreen',
      ],
      youtube: {
        noCookie: true, // Use YouTube no-cookie mode
        rel: 0, // Prevent showing related videos at the end
        modestbranding: 1, // Minimal branding
      },
    });

    if (props.src) {
      player.value.source = {
        type: 'video',
        sources: [
          {
            src: props.src,
            provider: 'youtube',
          },
        ],
      };
    }
  }
};

onMounted(() => {
  createPlayer();
});

onUnmounted(() => {
  if (player.value) {
    player.value.destroy();
  }
});

// Watch for `src` changes and reload the video
watch(() => props.src, (newSrc) => {
  if (newSrc && player.value) {
    player.value.source = {
      type: 'video',
      sources: [
        {
          src: newSrc,
          provider: 'youtube',
        },
      ],
    };
  }
});
</script>

<template>
  <div>
    <div class="plyr__video-embed" ref="playerElement">
      <iframe
          :src="`https://www.youtube.com/embed/${src}`"
          allowfullscreen
          allow="autoplay; encrypted-media"
      ></iframe>
    </div>
  </div>
</template>