dobromir-hristov / vue-vimeo-player Goto Github PK

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

How to set currentTime with this wrapper? i dont find a methods for that

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?

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>

The error that appears is the following:

Hi,

How can get the duration of the loaded video?
Vimeo API has a getDuration function

Regards

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 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>

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

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.

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'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.

How to get video length and current time ?

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.

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.

Something like player.seek(seconds)?

I know that the vimeo api supports this, but I couldn't find anything similar on this component.

Thanks!

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?

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.

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

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?

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?

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.

I would be an useful tool to use this method from the iframe, and it just necessary this few changes to the main.js file, adding this declaration in the methods section:

getBuffered(){ return this.player.getBuffered() },

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)

How do you create a placeholder until data arrives so that user is not welcomed by a blank page?

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 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">

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) 
  }
}

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?

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>

And here's the DOM

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?

Does it possible to make controls prop reactive?

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:

• import locally
• lazy loading like const vueVimeoPlayer = defineAsyncComponent(() => import ('vue-vimeo-player'))

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!

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

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()
     },

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>

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.

@vimeo/player - functions.js

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.

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.

So how would you add cue points to a video, and then access the event when a cue point is reached?

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

on update the player.loadVideo method is called without options. Is this intended?

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.

Please enable % in the width and height prop for the iframe width.

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'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

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.

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.

https://codesandbox.io/s/r56674nznp