<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@0.6.13/styles/defaults.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@0.6.13/styles/community-skin/video.min.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/vidstack@0.6.13/dist/cdn/prod.js"></script>
<media-player
        title="Sprite Fight"
        src="https://stream.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU.m3u8"
        poster="https://image.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU/thumbnail.webp?time=268&width=980"
        thumbnails="https://media-files.vidstack.io/sprite-fight/thumbnails.vtt"
        aspect-ratio="16/9"
        crossorigin
>
    <media-outlet>
        <media-poster
                alt="Girl walks into sprite gnomes around her friend on a campfire in danger!"
        ></media-poster>
        <track
                src="https://media-files.vidstack.io/sprite-fight/subs/english.vtt"
                label="English"
                srclang="en-US"
                kind="subtitles"
                default
        />
        <track
                src="https://media-files.vidstack.io/sprite-fight/chapters.vtt"
                srclang="en-US"
                kind="chapters"
                default
        />
    </media-outlet>
    <media-community-skin></media-community-skin>
</media-player>
<script>
    var p2pConfig = {
        logLevel: 'debug',
        live: false,        // set to true in live mode
        swFile: './sw.js',
        // trackerZone: 'hk',        // if using Hongkong tracker
        // trackerZone: 'us',        // if using USA tracker
        // token: YOUR_TOKEN
        // Other p2pConfig options provided by CDNBye
    }
    const player = document.querySelector('media-player');
    player.addEventListener('provider-change', (event) => {
        const provider = event.detail;
        if (provider?.type === 'hls') {
            provider.library = 'https://cdn.jsdelivr.net/npm/@swarmcloud/hls/hls.min.js';
            provider.config = {
                p2pConfig,
            };
        }
    });
</script>