Closed lucasgmartins closed 6 years ago
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
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.
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 , i used your suggestion , it worked thx
@redxtech Thank you for your answer. It works fine for me.
@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
}
}
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.
This works for me
<vue-plyr>
<audio controls>
<source :src="audioSrc" />
</audio>
</vue-plyr>
this.audioSrc = srcOfNewAudio;
document.querySelector("audio").load();
@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>
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>
@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;`
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.
`
`
Hi,
I'm trying to chance source value dynamic but nothing happens, Am I missing something?