Can't reload source dynamic

[redxtech]

Can't reload source dynamic

[da-rth]

You could try the following:

<plyr>
    <audio :src="yourSource" format="audio/mp3"></audio>
    <!-- or alternatively -->
    <video :src="yourSource" format="audio/mp4"></video>
</plyr>

Declaring the source in the video tag works for me. In order to use , I think you might have to reset the player somehow by pausing it and setting time to 00:00. Untested though.

[redxtech]

Actually, after looking at plyr docs, I have found that it is possible.
In the new version coming out soon, the player object will be emitted on mount with the player event. You can access it like this

<template>
    <vue-plyr @player="setPlayer">
        <video>...</video>
    </vue-plyr>
</template>

<script>
export default {
    name: 'Component',
    data () {
        return {
            player: {}
        }
    },
    methods: {
        setPlayer (player) {
            this.player = player
        }
    }
}
</script>

Once you have the player object set to this.player, you can use the source options to dynamically change the source of the player in your @click events. If this doesn't work reopen the issue.

[redxtech]

Are you able to reproduce in an environment with just plyr? It's possible that it doesn't support hotswitching the video url. If this happens to be the case, I would recommend switching out the entire player. As unfortunate as it is, it might work.

[jremi]

@redxtech , i used your suggestion , it worked thx

[fahim525]

@redxtech Thank you for your answer. It works fine for me.

[taylor-mccants]

@redxtech
Hi. I am still struggling with his particular issue. Can someone post their final resulting code?

In my code, the first video autoplays no problem, but when I call updateVideo() to update the videoUrl and when I change the source using the player state it just restarts the same video that's already playing.

In addition, setting the current time always results in 0 when I'm changing videos. However if the video does not change it will set the time with a test button.

<vue-plyr ref="plyr" @player="setPlayer">
            <video
              controls
              crossorigin
              playsinline
              autoplay
              clickToPlay
              resetOnEnd
              muted
              fullscreen='{ "enabled": "false" }'
              speed='{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }'
              data-plyr-config='{ "title": "Video Title" }'
            >
              <source
                :src="videoUrl"
                type="video/mp4"
              />
            </video>
          </vue-plyr>

data: () => ({
    player: {},
    videoUrl: process.env.VIDEO_SOURCE_URL + '/videos/videos/00032/00032.mp4',
  }),

methods: {
    setPlayer(player) {
      this.player = player
    },
    updateVideo(videoId = '00032', startTime = 0) {
      this.videoUrl = process.env.VIDEO_SOURCE_URL + '/videos/videos/' + videoId + '/' + videoId + '.mp4'
      this.player.source = {
        sources:
          [
            {
              src: process.env.VIDEO_SOURCE_URL + '/videos/videos/' + videoId + '/' + videoId + '.mp4',
              type: 'video/mp4',
              size: 720,
            },
          ]
      }
      this.$refs.plyr.player.currentTime = startTime
    }
}

[KobusPost]

Whenever I change the source dynamically using the sources object, the source changes. But I cannot seek. When setting currentTime (using the progressbar or in code) the video/audio starts at 0.

I access the player object via this.$refs -> using the this.player route gives an empty object.

[TalkLounge]

This works for me

<vue-plyr>
    <audio controls>
        <source :src="audioSrc" />
    </audio>
</vue-plyr>

this.audioSrc = srcOfNewAudio;
document.querySelector("audio").load();

[divyeshmakwana96]

@taylor-mccants You are mixing two player getters here. From looking at the recent doc I realized that the @player is obsolete so the method will never be executed. Hence the player object will always be null. Your start time updates because you have used $refs which is the correct approach.

Try this:

<vue-plyr ref="plyr">
    <video
            controls
            crossorigin
            playsinline
            autoplay
            clickToPlay
            resetOnEnd
            muted
            fullscreen='{ "enabled": "false" }'
            speed='{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }'
            data-plyr-config='{ "title": "Video Title" }'
    >
        <source
                :src="videoUrl"
                type="video/mp4"
        />
    </video>
</vue-plyr>

<script>
export default {
    data() {
        return {
            videoUrl: process.env.VIDEO_SOURCE_URL + '/videos/videos/00032/00032.mp4'
        }
    },
    methods: {
        updateVideo(videoId = '00032', startTime = 0) {
            let player = this.$refs.plyr.player
            player.source = {
                sources: [
                    {
                        src: process.env.VIDEO_SOURCE_URL +  '/videos/videos/' + videoId + '/' + videoId + '.mp4',
                        type: 'video/mp4',
                        size: 720
                    }
                ]
            }
            player.currentTime = startTime
        }
    }
}
</script>

[Dihan-Tech]

I can't dynamically change youtube video id.

        <VuePlyr ref="plyr" :options="options">
          <div
            data-plyr-provider="youtube"
            :data-plyr-embed-id="videoId"
            style="--plyr-color-main: #1ac266"
          ></div>
        </VuePlyr>

[danimalweb]

@Dihan-Tech Updating the Youtube source worked fine for me (Vue v3 & Composition API).

` let player = plyr.value.player;

  player.source = {
    type: 'video',
    sources: [
      {
        src: youTubeId,
        provider: 'youtube',
      },
    ],
  }
  player.currentTime = 0;`

[digitalcraftlabs]

I believe that vue-plyr v7.0.0 has an issue where I receive an 'Error in mounted hook: cannot appendChild' every time I change the video. I solved this problem by replacing the main vue-plyr.vue file with a new one.

`

<script> import Plyr from 'plyr' export default { name: 'vue-plyr', props: { /** Options object for plyr config. */ options: { type: Object, required: false, default() { return {} } }, /** Array of events to emit from the plyr object **/ emit: { type: Array, required: false, default() { return [] } } }, data() { return { player: {} } }, mounted() { try { this.player = new Plyr(this.$el.firstChild, this.opts) this.$emit('player', this.player) this.emit.forEach(element => { this.player.on(element, this.emitPlayerEvent) }) }catch(e) { console.error(e); } }, beforeDestroy() { try { this.player.destroy() } catch (e) { if (!(this.opts.hideYouTubeDOMError && e.message === 'The YouTube player is not attached to the DOM.')) { console.error(e) } } }, methods: { emitPlayerEvent(event) { this.$emit(event.type, event) } }, computed: { opts() { const options = this.options if (!this.options.hasOwnProperty('hideYouTubeDOMError')) { options.hideYouTubeDOMError = true } return options } } } </script>

`