Support for hls,like m3u8?

[redxtech]

Support for hls,like m3u8?

[mostafaznv]

just install hls and use this workaround.

<template>
    <vue-plyr ref="plyr" :options="playerOptions">
        <video :poster="post.media.cover" :id="'video-' + post.id" data-plyr-config="{'autoplay': false}">
        </video>
    </vue-plyr>
</template>

<script>
import VuePlyr from 'vue-plyr';
import Hls from 'hls.js';

export default {
    name: 'ComponentName',
    components: {
        VuePlyr
    },
    data() {
        return {
            playerOptions: {
                controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
                settings: ['quality', 'speed', 'loop'],
            }
        }
    },
    computed: {
        player() {
            console.log(this.$refs.plyr.player);
            return this.$refs.plyr.player;
        },
    },
    mounted() {
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource('https://domain.com/path/to/stream.m3u8');
            hls.attachMedia(this.player.media);

            window.hls = hls;
        }
    },
    
}
</script>

[simonhrogers]

@mostafaznv this is a lifesaver, thank you! I’m getting a slight issue at the moment – the first time I visit a page with this component, it seems to render the two elements separately – the plyr elements end up in an ugly mess above, and the full video below.

After that it always works fine – or works fine if I refresh the page. Have you experienced the same?

EDIT: this problem occurs if I load a route which DOES NOT have hls / plyr imported – and then navigate to one which does.

[simonhrogers]

Hi @mostafaznv – thanks so much for your response!
I’m an idiot and was really struggling to get a live demo together with codesandbox (I gave up).

I have found a workaround, and thanks to your pointer above figured out one possible issue with what I was doing. Describing here incase useful for others:

firstly, previously I was importing the SSR–friendly version of vue-plyr like described in the docs:
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'

this was being rendered on the server ahead of hjs being available.

If instead I add the instruction to transpile it in my nuxt.config.js file’s build section, and render the relevant component only on the client-side, we avoid such issues! Is this cheating?

    transpile: [
      'vue-plyr'
    ],

    <client-only>
      <ProjectVideo v-if="project.fullVideo" :video="project.fullVideo" />
    </client-only>

In case you are interested, a development version of the app is here!

https://onlysecondsaway.ubikproductions.com/

[redxtech]

This is already supported. Simply add the source as you would with a normal html5 video player (or however you would do it with plyr) and then wrap it with the plyr element.

[russ]

@snowdream Did you ever get this working?

[opnchaudhary]

Anyone who got this working?

[mostafaznv]

@mostafaznv this is a lifesaver, thank you! I’m getting a slight issue at the moment – the first time I visit a page with this component, it seems to render the two elements separately – the plyr elements end up in an ugly mess above, and the full video below.

After that it always works fine – or works fine if I refresh the page. Have you experienced the same?

You're welcome @simonhrogers
No, I didn't see this before.
Just check hls and plyr with a console.log
I think you have a problem with initiating things.

If you have any live demo and code, I can check it.