Add Plyr using Vite

Hi I hav gone through the Plyr docs and searched for issues but I cant get Plyr to work,

app.js file

import './bootstrap';

import Plyr from 'plyr';

const player = new Plyr('#player');

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Test view

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel Plyr Example</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
</head>
<body>
<audio id="player" controls>
    <source src="/path/to/audio.mp3" type="audio/mpeg">
    <!-- Add more audio sources here for cross-browser compatibility -->
</audio>

<script src="{{ asset('js/app.js') }}" type="module"></script>
</body>
</html>

Vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),


    ],
});

Is there something I need to do to get it to work? Thanks for the help.

Cushty

2 years ago

Level 4

Any help on this please? Thanks

rapa

2 years ago

Level 1

add window.Plyr = Plyr; to app.js

Please or to participate in this conversation.