Vimeo是一个视频共享网站，用户可以在其上传，分享和观看视频。
我想使用Vimeo播放器在Vue-Website上显示一堆视频。 为此，我创建了一个为每个视频创建的videoplayer-component： <template> <div class="video-element__container"> <div class="video-element__player" ref="player" @click="$emit('shrink')"></div> <div class="video-element__play-button" @click="play()"></div> </div> </template> <script> import Player from '@vimeo/player' export default { name: 'VideoPlayer', props: ['isActive', 'id'], data () { return { player: null, } }, mounted() { this.initPlayer() }, components: { }, methods: { async play () { try { await this.player.play() this.isPlaying = true } catch (e) { console.log(e) } }, pause() { this.player.pause() this.isPlaying = false }, initPlayer () { let options = { url: 'https://vimeo.com/393632283', loop: false, controls: false, muted: true, }; let iframe = this.$refs.player this.player = new Player(iframe, options); } } } </script> ，每当我单击“播放”时，我都会收到以下错误： Uncaught (in promise) Error: Unknown player. Probably unloaded. at readyPromise (player.es.js?84c9:1458) at new Promise (<anonymous>) at Proxy.ready (player.es.js?84c9:1457) at eval (player.es.js?84c9:1311) at new Promise (<anonymous>) at Proxy.get (player.es.js?84c9:1306) at Proxy.getDuration (player.es.js?84c9:2052) at Proxy.initPlayer (VideoPlayer.vue?5912:93) at Proxy.play (VideoPlayer.vue?5912:53) at Object.onClick._cache.<computed>._cache.<computed> (VideoPlayer.vue?5912:17) thyet，当我使用Vimeo控件时，它可以正常工作。 有人可以在这里看到这个问题吗？谢谢！ 第十节Triet Doan的回答现在已经接受，我不喜欢它。它将整个OP代码编写在选项API中，并将其重写为组成API，而无需解释为什么需要它...well根本不需要！实际上，修复原始代码的最简单的事情是在player: null中发表评论（如下演示中可以看到） 为什么 invue反应性可能有些侵入。使用object.defineproperty（）（用于VUE 2中的反应性）和 -proxies（用于Vue 3中的反应性）都可以改变行为，尤其是对于复杂的数据类型/类，如Vimeo Player所致，这两个Getters/setter the tefineproperty（用于反应性2中的反应性）都可以改变行为。 为了解决此类问题，请不要将如此复杂的对象放入data()或将它们包裹在data()或ref()中。在大多数情况下，您不需要VUE模板对这种复杂对象的某些内部状态进行反应。 INSTEAD只需将它们添加到reactive()中的this.player = new ...中，或将它们声明为普通变量（无mounted或ref()）。 reactive()setup() 战争 另一方面，i完全同意使用持续包装器-Vue-Vimeo-Player。因为它处理一些边缘案例，更重要的是，当组件被破坏时，播放器的unloading。没有它，您将在应用程序中创建一个记忆泄漏 我假设您使用的是VUE 3，因为您的代码对我来说与VUE 2一起工作得很好，并且我在Vue 3中遇到了同样的错误。 对于VUE 3，您需要使用以下const app = Vue.createApp({ name: 'VideoPlayer', data() { return { // player: null, <-- THIS LITTLE CHANGE IS NEEDED } }, mounted() { this.initPlayer() }, methods: { async play() { try { await this.player.play() this.isPlaying = true } catch (e) { console.log(e) } }, pause() { this.player.pause() this.isPlaying = false }, initPlayer() { let options = { url: 'https://vimeo.com/393632283', loop: false, controls: false, muted: true, }; let element = this.$refs.player this.player = new Vimeo.Player(element, options); } } }) app.mount('#app')方法来重组代码：<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script> <script src="https://player.vimeo.com/api/player.js"></script> <div id="app"> <div class="video-element__container"> <div class="video-element__player" ref="player" @click="$emit('shrink')"></div> <div class="video-element__play-button" @click="play()"></div> </div> </div> 上面的代码已经经过预期的测试和工作。 您可以查看模板refs有关更多信息，如何访问setup()中的HTML元素。关于<template> <div class="video-element__container"> <div class="video-element__player" ref="playerRef" @click="$emit('shrink')"></div> <div class="video-element__play-button" @click="play()"></div> </div> </template> <script> import {ref, onMounted} from 'vue'; import Player from '@vimeo/player'; export default { name: 'VideoPlayer', setup() { let player; let isPlaying = false; const playerRef = ref(null); onMounted(() => { const options = { url: 'https://vimeo.com/393632283', loop: false, controls: false, muted: true, }; player = new Player(playerRef.value, options); }); const play = () => { player.play() .then(isPlaying = true) .catch(e => console.log(e)); }; const pause = () => { player.pause() isPlaying = false }; return { player, isPlaying, playerRef, play, pause } } } </script> 方法本身，请检查CompositionAPI文档。 Besides，Vimeo SDK也有一些Vue包装器，例如setup()。如果愿意，您可以使用它们而不是编写自己的。 我知道这个线程是旧的，但是对于遇到这个问题的其他人来说： 使用setup()而不是普通的。
我在自动播放中使用了几种弹出式模式。 每个弹出窗口正常工作并正确关闭和视频自动播放器，但是当我单击第二个弹出式自动播放器时，是Backgro中的第一个Autoplays ...
我创建了一个使用 Vimeo 播放视频的 iOS 应用程序。我想知道在 iOS Swift 中显示 Vimeo 视频的最佳方法是什么。 我已经修复了，当单击图像时，该位置...
我尝试使用 flutter_inappwebview 包在 flutter 中自动播放 vimeo 视频 https://pub.dev/packages/flutter_inappwebview 我读了很多博客。我的前辈告诉我使用下面的
在 iPhone 上使用 Objective-C 将视频上传到 Vimeo
我正在开发一个应用程序，我想将视频上传到 Vimeo、Facebook 和 YouTube。 Facebook 和 YouTube 有相当简单的 API，Vimeo 有很好的开发人员文档，但没有 Obj...
我尝试在我的应用程序中登录 vimeo 上传视频，我在 vimeo 上创建的应用程序已获得批准。 上传访问 已批准用于以下帐户：您的帐户 我使用 AFNetworking 和
Vimeo javascript api player.play() 不播放
这种奇怪的行为似乎是在上周左右开始的。 下面的 html/javascript 组合应该加载 Vimeo 视频，然后当用户按下播放时，它应该加载并播放不同的...
首先，如果这不是我应该在 stackoverflow 上问的问题，我深表歉意。我正在尝试在 Vimeo 视频完成后删除左下角的小“重播”按钮
我一直在研究两个视频的 oembed 响应。 https://vimeo.com/api/oembed.json?callback=vimeoCallback&url=https://vimeo.com/392817533 https://vimeo.com/api/oembed.json?callback=
所以我用 UIkit 构建了一个小型滑块。 如果第二张幻灯片是视频，则仅在单击下一张幻灯片时才开始播放视频，这一点很重要。这样，视频就在开头...
Webflow 网站上的 Vimeo 视频 (net::ERR_HTTP2_PROTOCOL_ERROR 206（部分内容））出现问题
网址：https://www.studiocantina.com/ 在我的网站上，我的 Vimeo 视频出现间歇性错误。 该网站是使用 Webflow 构建和托管的，所有视频均采用 HTML 编码，取自 Vimeo 的...
使用 jQuery 过滤器在 colorbox 中打开 vimeo url
我想使用 jQuery 扫描 html 页面 - 在本例中由 WordPress 创建，以查找指向 vimeo 视频的所有链接 - 由用户通过 WP 编辑管理员添加。 然后我想将控制权移交给...
在 iOS 上使用 JavaScript API 嵌入 Vimeo
我正在尝试使用 Vimeo 的 JavaScript API (http://developer.vimeo.com/player/js-api) 通过我的应用程序控制嵌入视频，但我什至无法让他们的示例工作（ http://jsfiddle.net/bdou...
背景 Vimeo 视频的行为类似于背景大小：封面 - 不是全尺寸，但在较小的容器 div 中
我现在已经浏览了一大堆关于这个主题的帖子，但我所能找到的只是如何在全屏上解决这个问题。那么..如何使用
我从 Vimeo 帐户获得的是 ID 和令牌。 `var response = wait http .get('https://player.vimeo.com/video/' + videoId + '/config');`。 我尝试使用获取视频 URL。但是...
如果我有 Vimeo 视频 URL，是否有任何方法可以从 Vimeo API 获取关联的缩略图？就像在 Youtube 中一样，我使用“https://img.youtube.com/vi//default.jpg” 我试图找到一种方法...
我正在将 Vimeo Player 与我的 cakephp 应用程序集成，它给了我上述错误 错误：在非对象上调用成员函数 getEmbedHtml() 文件：C:\wamp\www nn pp\View\Videos\...
如何让react-player和Remix run一起工作？
我正在使用 Shopify 的氢框架，该框架使用 Remix。我正在尝试将视频添加到下面组件中的网站。 从 'react-player/vimeo' 导入 VimeoPlayer； 导出默认功能 HeroVide...