Можно ли использовать пользовательский курсор над iframe Vimeo, используя их библиотеку player.js? - PullRequest
Новая
       43

Можно ли использовать пользовательский курсор над iframe Vimeo, используя их библиотеку player.js?

0 голосов
/ 27 февраля 2019

Я создал сайт для нашей студии дизайна, в котором есть видео Vimeo, встроенные в библиотеку Vimeo Player.js.У нас есть большой пользовательский курсор, который предназначен для использования на всем сайте, однако, очевидно, курсор не работает над фреймами.

Я использовал обходной путь для зацикливания видео (для которого не нужен пользовательвзаимодействие), который накладывает на игрока невидимый псевдоэлемент, что позволяет ему по-прежнему считаться моим доменом. 

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

Согласно документации, я должен иметь возможность использовать метод воспроизведения, если он не на мобильном устройстве (о чем мне не нужно беспокоиться)так как моя проблема с курсором не является проблемой), но я не смог заставить его работать.В настоящее время я полагаюсь на прямое взаимодействие при запуске видео.

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.

1 Ответ

0 голосов
/ 27 февраля 2019

Попробуйте plyr.io плеер, он воспроизводит видео Vimeo и Youtube, и вы можете использовать свой собственный CSS .Я попытался добавить вашу css на их демо страницу, и она работала нормально: 

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, потому что вы не можете воспроизводить видеообъявления вместе с их видео, только вы можете воспроизводить видеообъявления со своими собственными размещенными видео.

...