SVG маска с несколькими источниками видео? - PullRequest
Новая
       39

SVG маска с несколькими источниками видео?

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

Не уверен, если это возможно, но я пытаюсь понять, возможно ли иметь круговую маску SVG для различных элементов DOM видео, которые все будут исправлены.

enter image description here

В идеале каждый кружок SVG выше будет маскировать видео, которое будет находиться в другом слое.Затем я бы преобразовал круг в масштаб, чтобы он соответствовал высоте / ширине браузера

Я перепробовал все различные примеры кода, поэтому размещение кода здесь не будет иметь никакого значения, просто ища направление, чтобы увидетьесли это технически возможно, и направить меня в правильном направлении

1 Ответ

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

Если я вас правильно понял, вы можете использовать для этого clip-path, например: 

video {
  width: 320px;
  height: 240px;
  clip-path: circle(20%);
}

video.full {
  width: 100%;
  height: 100%;
  clip-path: none;
}

.hide {
  display: none;
}

https://jsfiddle.net/deaxfcbk/

Откройте приведенный выше пример и нажмите на видео,он заполнит область результатов, сохраняя свои пропорции, а остальные видео будут скрыты.Если вы нажмете еще раз, он станет кругом.

Вы можете добавить столько видео, сколько захотите, скрыть элементы управления, воспроизвести их на весь экран и т. Д.

Надеюсь, эта помощь:)

...