dobromir-hristov / vue-vimeo-player Goto Github PK
View Code? Open in Web Editor NEWVue.js wrapper for Vimeo player
License: MIT License
Vue.js wrapper for Vimeo player
License: MIT License
Hi everyone !) I use your component but have a problem. prop autoplay doesn't work ((( what am I doing wrong ?
<vimeo-player
ref="player"
:video-id="videoID"
@ready="onReady"
:autoplay="autoplay"
:player-height="height"
:player-width="width"
:loop="true">
Hey there,
This component looks great but I can't seem to get it to work in Nuxt.
I get an error of 'window undefined'.
I understand this snippet should help so it's only built in the client.
if (process.BROWSER_BUILD) {
var vueVimeoPlayer = require('vue-vimeo-player')
}
But it's not rendering the component. I'm still new to Nuxt but was hoping maybe you could provide insight? If not feel free to close this!
Thanks.
How to get video length and current time ?
Hi,
Really easy to integrate with my Laravel app - videos loading and playing as they should.
However I'm getting a console error:
"InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable"
Have you come across this before? I need to hook into the players events but this seems to be stopping me.
Cheers
I've followed the instructions for using vue-vimeo-player with nuxt but it seems it still misses something related to JQuery:
On console I get this:
This dependency was not found: friendly-errors 19:55:01
friendly-errors 19:55:01
* __webpack_provided_window_dot_jQuery in ./node_modules/@vimeo/player/dist/player.es.js friendly-errors 19:55:01
friendly-errors 19:55:01
To install it, you can run: npm install --save __webpack_provided_window_dot_jQuery friendly-errors 19:55:01
and on browser I get this message:
ERROR in ./node_modules/@vimeo/player/dist/player.es.js
Module not found: Error: Can't resolve 'jquery' in '<path>/node_modules/@vimeo/player/dist'
Is there any best practice to fix it?
Probably it should be added to the docs.
We embedded the vue-vimeo-player as instructed, but get the following error in the console. The player still works, just wondering if there is a way to fix this error:
Uncaught ReferenceError: React is not defined
at Object. (global_combined.min.js?0fa38012:5)
at n (global_combined.min.js?0fa38012:5)
at Object. (global_combined.min.js?0fa38012:6)
at n (global_combined.min.js?0fa38012:5)
at Object. (global_combined.min.js?0fa38012:6)
at n (global_combined.min.js?0fa38012:5)
at Object. (global_combined.min.js?0fa38012:6)
at n (global_combined.min.js?0fa38012:5)
at global_combined.min.js?0fa38012:5
at global_combined.min.js?0fa38012:5
I'm trying to setCurrentTime()
on a video, but I cannot access the underlying Vimeo player instance.
let player = this.$refs.vimeo;
Gives me access to the vueVimeoPlayer
, but If I do this:
let player = this.$refs.vimeo.player;
This value is undefined.
Is there a different way we need to set this up to in the vue-vimeo-player@next
?
In my case, I want to have the iframe with width="100%" and height="100%" ( or to be manage in CSS). But the width and height are sent to the player, the value id 100px
For backwards compatibility, defined width and height option of the player only if not null
Hi,
How can get the duration of the loaded video?
Vimeo API has a getDuration function
Regards
Hey, I love your package, but I do need to be able to embed our private company videos, not just public ones. Is this possible with this package or will I need to look for another solution?
I looked through your code and I don't see a way to authenticate.
Thanks.
Hi, i'm trying to add a custom button to skip forward and backward by +10s and -10s respectively but I can't seem to find an event for it. I've tried using the event from the vimeo official docs playbackratechange and it still doesn't work. i'd like the full list of events , thanks.
Thanks for the hard work!
I'm working on storing a users watch progress on a video and then when the page is revisited later the video will automatically start where they left off. I'm not seeing a way to do this, can you assist? Thanks!
According to the official @vimeo/player documentation, the video id or the url of the video must be required, but it does not specify that it is solely and exclusively the video id.
I'm going through a bug where my url id is composed by the junction of two IDs (e.g 3817734932/32429420) and if I use the videoId property passing my id with a slash, it falls into a validation checking if the ID is an integer and the request is not made.
export function getVimeoUrl(oEmbedParameters = {}) {
const id = oEmbedParameters.id;
const url = oEmbedParameters.url;
const idOrUrl = id || url;
if (!idOrUrl) {
throw new Error('An id or url must be passed, either in an options object or as a data-vimeo-id or data-vimeo-url attribute.');
}
if (isInteger(idOrUrl)) {
return `https://vimeo.com/${idOrUrl}`;
}
if (isVimeoUrl(idOrUrl)) {
return idOrUrl.replace('http:', 'https:');
}
if (id) {
throw new TypeError(`“${id}” is not a valid video id.`);
}
throw new TypeError(`“${idOrUrl}” is not a vimeo.com url.`);
}
As you can see, id takes precedence over url.
const idOrUrl = id || url; // 3817734932/32429420 is not a URL nor an integer...
if (isInteger(idOrUrl)) {
return `https://vimeo.com/${idOrUrl}`;
}
if (isVimeoUrl(idOrUrl)) {
return idOrUrl.replace('http:', 'https:');
}
To work around this problem, I only need to use the videoUrl property, but I won't be able to use the videoId property because of the priority order described in the code above.
I will create a Pull Request to make this correction.
Does it possible to make controls prop reactive?
Hi, I can't manage to trigger the getDuration() or any getter functions.
"message": "player.getDuration is not a function", "statusCode": 500
I'm on Nuxt. Am I doing something wrong ? Could you help me out ? Controls, video, options loading and events are working.
<template>
<div>
<client-only>
{{domDuration}}
<vimeo-player ref="player" :video-id="id" :options="options" @loaded="onReady" />
</client-only>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
domDuration:'',
id:"387248846",
options: {
quality:'1080p',
playsinline:false,
responsive:true,
muted: false,
autoplay: true,
allowfullscreen:true,
},
playerReady: false
}
},
methods: {
onReady() {
let player = this.$refs.player;
player.getDuration().then(function(duration) {
let minutes = Math.floor(duration / 60);
let seconds = duration-(minutes*60)
this.domDuration=`${minutes} minutes ${seconds}`
})
},
},
}
</script>
How to set currentTime with this wrapper? i dont find a methods for that
Hello,
As you can in this thread vimeo/player.js#38, there a parameter to made the player responsive.
Here a snippet of the code:
props: {
playerHeight: {
default: 320
},
playerWidth: {
default: 640
},
options: {
default: () => ({})
},
videoId: {
required: true
},
videoUrl: {
default: undefined
},
loop: {
default: false
},
autoplay: {
default: false
},
controls: {
default: true
},
responsive: {
default: false
}
},
mounted () {
const options = {
id: this.videoId,
width: this.playerWidth,
height: this.playerHeight,
loop: this.loop,
autoplay: this.autoplay,
controls: this.controls,
responsive: this.responsive
};
if (this.videoUrl) { options.url = this.videoUrl; }
this.player = new Player(this.elementId, assign(options, this.options));
this.setEvents();
},
I'm showing several videos in a v-container
and trying to make it responsive. When I resize the window, my parent component changes the player-width
and player-height
props I'm passing into vueVimeoPlayer
but it doesn't change size until I reload the page. Could the player either handle resize events, or respect when the incoming width/height props change and resize itself?
I'm calling the player, but it's giving an error when rendering it. Below is the code:
<template>
<vue-vimeo-player ref="player" autoplay video-id="647004474" class="embeded-video" @ended="ended" @loaded="loaded" />
</template>
<script>
import {vueVimeoPlayer} from 'vue-vimeo-player'
export default {
name: 'Video',
components: {vueVimeoPlayer},
}
</script>
Hi, I am using vue-vimeo-player with Nuxt and I am getting this error:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Versions
"dependencies": {
"nuxt": "^1.0.0",
"vue-vimeo-player": "0.0.6"
},
nuxt.config.js
plugins: [
{
// https://github.com/dobromir-hristov/vue-vimeo-player#usage-with-nuxtjs
src: "~plugins/vimeo-player",
ssr: false
}
],
build: {
vendor: ["vue-vimeo-player"]
}
template
<vimeo-player
video-id="67475783"
player-width="640"
player-height="360"
></vimeo-player>
plugins/vimeo-player.js
import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'
Vue.use(vueVimeoPlayer)
I basically followed the Nuxt guide in the readme and tried to plug this plugin in, everyhing should be default. Did I miss something?
I can hear the video sound but no video is displayed at all; I mean I don't even see the player
I get in the console
[Info] Successfully preconnected to https://i.vimeocdn.com/
[Info] Successfully preconnected to https://f.vimeocdn.com/
[Info] Successfully preconnected to https://fresnel.vimeocdn.com/
ready
[Error] Beacon API cannot load https://player-telemetry.vimeo.com/player-events/log/play. A server with the specified hostname could not be found.
[Error] Failed to load resource: A server with the specified hostname could not be found. (play, line 0)
[Error] Beacon API cannot load https://player-telemetry.vimeo.com/player-events/log/partial. A server with the specified hostname could not be found.
[Error] Failed to load resource: A server with the specified hostname could not be found. (partial, line 0)
here is my code
<vueVimeoPlayer
v-if="videoType === 'vimeo'"
ref="vimeo"
:video-id="videoUrl"
:player-height="500"
@ready="onReadyVimeo"
/>
import { vueVimeoPlayer } from 'vue-vimeo-player'
components:{
vueVimeoPlayer
},
onReadyVimeo(){
console.log('ready')
this.$refs.vimeo.play()
},
So according to the docs, this is the way to create plugin in Nuxt
import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'
const app = Vue.createApp(App)
app.use(vueVimeoPlayer)
But it throws an error stating App is not defined. So, I went the traditional way and created a plugin in similar fashion
import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'
Vue.use(vueVimeoPlayer)
Vue.component(vueVimeoPlayer)
I got no errors but there's no element rendering inside the DOM
Here's the page code
<template>
<div class="video">
<client-only>
<vimeo-player ref="player" :video-id="videoID" />
</client-only>
</div>
</template>
<script>
export default {
data() {
return {
videoID: '48076xxxx',
}
},
}
</script>
Hi,
any chance of updating 'peerDependencies' to latest Vue version? I'd say, this is critical as there's security fix included.
Current version breaks Nuxt build, there's a conflict with vue-server-renderer.
Please, add event for buffering.
const eventsToEmit = [
'play',
'pause',
'ended',
'bufferstart',
'bufferend',
'timeupdate',
'progress',
'seeked',
'texttrackchange',
'cuechange',
'cuepoint',
'volumechange',
'error',
'loaded'
]
https://developer.vimeo.com/player/sdk/reference#bufferend
Good Job!
Thank you
I see @timeupdate
firing every 250ms but cannot figure out how to get the actual timestamp. Any help?
<vimeo-player ref="player" @timeupdate="updateCurrentTime"></vimeo-player>
methods: {
updateCurrentTime() {
console.log(currentTime)
}
}
Hi, the video player works fine until i refresh the page, then it throws this error
You must pass either a valid element or a valid id.
I am using it with nuxt.
A cookie associated with a cross-site resource at http://vimeo.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
on update the player.loadVideo method is called without options. Is this intended?
Hello, i get this warning when run npm run dev
with nuxt.
WARN vendor has been deprecated due to webpack4 optimization
can we safely omit vendor: ['vue-vimeo-player'],
inside nuxt.config?
Something like player.seek(seconds)?
I know that the vimeo api supports this, but I couldn't find anything similar on this component.
Thanks!
It would be nice if the project could use vue-demi.
There are lots of old projects out there that still are vue 2 based.
By using vue-demi these projects could profit from the composition api version of the plugin.
It should be possible to generate the embed without width and height attributes.
Described here -> https://help.vimeo.com/hc/en-us/articles/360000710167-Adjusting-the-size-of-the-embedded-player
Please enable % in the width and height prop for the iframe width.
Sorry if this is a noob question
I am trying to import the component locally as in the doc:
` import { vueVimeoPlayer } from 'vue-vimeo-player'
export default {
data: {},
components: { vueVimeoPlayer }
}
`
I must precise I did not import globally with Vue.use()
as it is not needed for me.
but <vimeo-player>
is not found; nothing happens
I don't understand why
Vimeo is not going to be much on my website so I need:
const vueVimeoPlayer = defineAsyncComponent(() => import ('vue-vimeo-player'))
How can I achieve playing another video when the first is finished? I can't find it in the options or the Vimeo API, maybe it is called in a strange way?
How do you create a placeholder until data arrives so that user is not welcomed by a blank page?
Using the UIKit framework, I have a video component in a modal which is initially hidden. When the modal is shown the player is there but the events (i.e. play etc) are not fired.
Hi! Some times, we need use player without video-id.
For example:
We have list of videos. When i click on image preview, player must:
update(videoId)
But, at this moment player not init, and we can't use
this.$refs.player.update(videoId)
this.$refs.player - is null.
Another case:
We have input for video-id. When user set ID, we must load & show video.
Maybe we can set video-id id not required prop?
Or, maybe we can add some prop like "empty-player" & video-id can be null?
Hi, i try to search this option but i don't find it, if don't exist maybe can considerated added it in the future?, this will be usefull for make interactions like the buttons of player
First of all, thank you for implementing the API for vue3.
I am working in a VR project and I was very glad to notice that I could easilly receive the spatial coordinates of the video by the @camerachange event.
I was wondering if it is possible to programmatically interact with the spatial coordinates as well somehow.
Thanks in advance.
Hi there,
Used your plugin flawlessly throughout all my projects however having difficulty in settings options in a new Vue3 project.
VJS Devtools I can see that options are being passed correctly but it looks like they are not being passed to the player?
Responsive is not working, but I have tried a few options and it looks like none of them work...
Thank you,
Josh
I am working on custom vimeo player, and I need the functionality to make subtitles visible on custom button click.
Here is my code with the player included and I want to enable subtitles on enableFullScreen method.
<template>
<div class="person-video">
<div
class="person-video__wrapper"
:class="{ 'person-video__wrapper--full': fullScreenView }"
>
<div class="person-video__controls">
<img
src="~/assets/svg/play.svg"
alt=""
@click="playTheVideo"
v-if="!stop"
/>
<span @click="stopTheVideo" v-if="stop">STOP </span>
<img
src="~/assets/svg/subtitles.svg"
alt=""
@click="enableFullScreen"
/>
<img src="~/assets/svg/sound.svg" alt="" @click="unMuteVideo" />
</div>
<client-only>
<vimeo-player
ref="player"
:video-id="videoId"
:options="options"
@ready="onReady"
:autoplay="true"
/>
</client-only>
</div>
</div>
</template>
<script>
export default {
name: "PersonVideo",
props: {
data: {
type: Object,
default: () => {},
required: true,
},
},
data() {
return {
stop: false,
mute: false,
height: 700,
options: {
controls: false,
muted: true,
texttrack: false,
},
playerReady: false,
fullScreenView: false,
language: "",
};
},
computed: {
videoId() {
return this.data.vimeoLink.split("/")[3];
},
},
methods: {
onReady() {
this.playerReady = true;
},
playTheVideo() {
this.$refs.player.play();
this.stop = true;
},
stopTheVideo() {
this.$refs.player.pause();
this.stop = false;
},
unMuteVideo() {
this.$refs.player.unmute();
},
enableFullScreen(e) {
if (process.client) {
const videoWrapper = document.querySelector(".person-video__wrapper");
this.fullScreenView = true;
this.language =
window.navigator.userLanguage || window.navigator.language;
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
this.fullScreenView = false;
}
} else {
if (videoWrapper.requestFullscreen) {
videoWrapper.requestFullscreen();
this.$refs.player.update();
}
}
}
},
},
};
</script>
The plugin works well in Chrome, but throws these errors in IE 11.
TypeError: Object doesn't support property or method 'assign'
at mounted (eval code:2175:5)
at callHook (eval code:2916:9)
at insert (eval code:4149:7)
at invokeInsertHook (eval code:5944:9)
at patch (eval code:6163:5)
at Vue.prototype._update (eval code:2665:7)
at updateComponent (eval code:2783:7)
at get (eval code:3137:5)
at run (eval code:3214:5)
at flushSchedulerQueue (eval code:2976:5)
TypeError: Unable to get property 'unload' of undefined or null reference
at beforeDestroy (eval code:2180:5)
at callHook (eval code:2916:9)
at Vue.prototype.$destroy (eval code:2695:5)
at destroy (eval code:4169:9)
at invokeDestroyHook (eval code:5727:59)
at invokeDestroyHook (eval code:5732:9)
at invokeDestroyHook (eval code:5732:9)
at invokeDestroyHook (eval code:5732:9)
at patch (eval code:6065:30)
at Vue.prototype.$destroy (eval code:2718:5)
I've need to be able to enable and disable the controls bar on video player dynamically and automatically play the video after that, but after dynamic ":controls" property change it stuck and do not showing timeline according to video playing time when I play video programatically using this.$refs['player-ref'].play() method. Also I reproduced this with issue with test-app from current repository (I will attach screenshot with my changes)
how it looks in browser - video is playing, play button is changed to pause button but timeline still frozen
If the video I try to load in the player is not available, I can no longer change the video using reactive variables of vue
I tried using the autoplay
prop, which doesn't seem to work, then tried to use the ready
event to manually call the play
method, but the video does not play. I've included an example on codesandbox below.
So how would you add cue points to a video, and then access the event when a cue point is reached?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.