Question

我为我们的设计工作室建立了一个网站，其中包含嵌入了Vimeo的Player.js库的Vimeo视频。我们有一个很大的自定义游标，可以在整个网站上使用，但是显然游标不能在iframe上使用。

我使用了一种变通方法来循环播放视频（不需要任何用户交互），从而在播放器上放置了不可见的伪元素，从而仍将其视为我的领域。

.video__loop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

此页面包含不需要控制的背景循环视频示例，因此自定义光标没有问题： https://www.new.company/work/two-chairs

但是，我还创建了一个具有时间码和播放/暂停功能的自定义播放器，需要用户进行交互，因此光标窍门不起作用，因为我需要人们能够单击Vimeo对象。

此页面提供了我制作的基本视频播放器的示例：https://www.new.company/work/nike-chantel-navarro

是否可以将点击从一个对象传递到另一个？还是可以将点击直接指向Vimeo对象？

根据文档，只要不在移动设备上就可以使用play方法（我不必担心，因为我的光标问题在那里没有问题），但是我没有能够使其正常工作。目前，我依靠直接互动来开始播放视频。

https://github.com/vimeo/player.js/

play(): Promise<void, (PasswordError|PrivacyError|Error)>
Play the video if it’s paused. Note: on iOS and some other mobile
devices, you cannot programmatically trigger play. Once the viewer
has tapped on the play button in the player, however, you will be
able to use this function.

Answer 1

尝试plyr.io播放器，它播放Vimeo和Youtube视频，您可以使用自己的CSS。我尝试将您的css添加到他们的demo页中，并且效果很好：

html, body, iframe, a, * {
  cursor: url(https://www.new.company/img/new_cursor.svg) 10 10, pointer;
  cursor: -webkit-image-set(url(https://www.new.company/img/new_cursor.svg) 1x, url(https://www.new.company/img/new_cursor@2x.svg) 2x) 0 0, pointer;
}

它不适用于视频广告，Vimeo和Youtube也不会发生这种情况，因为您不能将视频广告与它们的视频一起播放，只能与自己的托管视频一起播放视频广告。

是否可以使用其player.js库在Vimeo iframe上使用自定义光标？

1 个答案: