Множественный выбор

Фактически, многие программы видеоконференцсвязи позволяют полностью изменить фон на что-то другое. Так что, если вы думаете, что пришло время для чего-то более расслабляющего, чем простой синий или зеленый фон, то, возможно, лучше всего подойдет лесной пейзаж или фон Лейкленда.Очевидно, это зависит от контекста вашей встречи, но возможность придать вашей встрече что-то дополнительное к предмету обсуждения может быть изящным штрихом.

Соображения по поводу зрения

И наоборот, стоит помнить, что некоторые из ваших коллег по видеоконференцсвязи могут иметь нарушение зрения, поэтому легкий для просмотра оттенок может быть лучшим решением. Это означает, что что-то вроде прохладного оттенка синего или зеленого часто может быть лучшим вариантом, чтобы понравиться всем людям, присутствующим на вашей встрече.Сохранение визуальной нейтральности также означает, что вас будет легче увидеть, так как загруженный фон может немного переборщить с глазами тех, кто наблюдает за вами.

Программное обеспечение Zoom

Существует множество вариантов программного обеспечения для видеоконференцсвязи. Но одним из основных игроков и часто незаменимым решением для офисных работников, которые находятся вне поля или просто работают дома, является Zoom. Теперь Zoom оснащен отличными инструментами, позволяющими сделать работу по видеоконференцсвязи простой и профессиональной.Он также способен преобразовывать фон, так что даже ваше неопрятное рабочее место дома может больше походить на профессионала, живущего в «подходящем» месте офиса.

На странице поддержки Zoom есть множество инструкций о том, как это сделать, в зависимости от того, с каким ноутбуком, настольным компьютером или мобильным устройством, таким как смартфон или планшет, вы работаете. Стоит отметить, что эта процедура работает лучше всего, если вы находитесь в достаточно хорошо освещенном помещении, поэтому не пытайтесь делать это, сидя за ноутбуком в постели посреди ночи.Следуйте простым инструкциям для любого компьютера или устройства, которое вы используете, и скоро вы будете в бизнесе.

Программное обеспечение Microsoft

Неудивительно, что Microsoft позволит вам сделать то же самое, если вы используете или получили от своего работодателя указание использовать его программное обеспечение. Например, Microsoft Teams позволяет вам следовать аналогичному маршруту для изменения фона во время видеоконференцсвязи.

На самом деле, есть изящный поворот, поскольку на этот раз это больше размытый фон, что нормально, если ему удастся скрыть груду грязного белья в углу вашей спальни.Этот процесс, как описано на страницах поддержки Microsoft, еще проще.

Маршрут Skype

Как и в случае с Microsoft Teams, вы также обнаружите, что маршрут размытия фона является опцией во все более популярном программном инструменте Skype. На их страницах блога есть отличный обзор того, как это сделать, в котором объясняется, что эта функция доступна для большинства настольных компьютеров и ноутбуков, оснащенных последней версией программного обеспечения.

Вы можете получить более полную информацию о этапах, которые необходимо выполнить, перейдя на специальную страницу поддержки для процесса, на которой описаны его действия в зависимости от типа машины или устройства, с которыми вам предстоит работать.Однако эта функция не поддерживается в Linux. В этом случае ознакомьтесь с нашими лучшими альтернативами Skype.

ChromaCam

Еще один вариант, который вы, возможно, захотите изучить, — это ChromaCam. Это настольное приложение для Windows, которое может работать в паре с обычной веб-камерой. Его можно использовать в паре с такими, как Skype, Webex, Zoom, Google Hangouts и другими, и позволяет вам изменять фон ваших видеозвонков.

После установки этот маршрут также позволяет удалить фон, размыть его, добавить эффекты потоковой передачи или вставить слайды презентации Powerpoint в качестве фона.

ChromaCam в настоящее время поставляется в двух вариантах: с бесплатной версией Lite, которая предлагает возможность создания виртуального зеленого экрана, размытия фона, а также возможность добавления стандартных фоновых изображений.

Между тем, версия Pro имеет единовременную плату в размере 29,99 долларов США и добавляет отсутствие водяных знаков, положение для вставки пользовательского фона и логотипов, а также поддержку тех слайдов Powerpoint, которые вы просто не можете дождаться, чтобы показать их, когда Следующая встреча. ChromaCam также сообщает, что в настоящее время работает над версией и для Mac.

Создание полноэкранного видео фона HTML5 с помощью CSS

Полноэкранный фон в последнее время стал очень популярным в веб-дизайне. Полноэкранные изображения, используемые в качестве фона, обладают потрясающим визуальным эффектом, но знаете ли вы, что вы можете использовать видео фон точно так же?

Видео, вероятно, лучший способ привлечь внимание. Хороший видео-фон может легко заставить людей остановиться и обратить внимание, увеличивая время, которое они проводят на сайте. Это увеличенное время на сайте потенциально может привести к большему взаимодействию с другим контентом на странице.

Снять эффект видео фона довольно просто. На самом деле это можно сделать, используя только CSS. CSS background и background-image Свойства принимают только цвета, градиенты, растровые изображения и SVG в качестве значений. Так что насчет видео?

Мы создаем простой элемент видео HTML5 с атрибутами loop, autoplay и muted и помещаем его внутри элемента контейнера. Изображение, используемое в атрибуте постера, при загрузке будет заменено первым кадром видео.Поэтому рекомендуется использовать первый кадр видео для изображения плаката.

Добавьте несколько простых строк CSS.

Теперь наш видеоэлемент имеет ширину и высоту области просмотра (окна нашего браузера). Это проблема, потому что в большинстве случаев соотношение сторон нашего видеоэлемента будет отличаться от соотношения сторон видеоисточника (в данном случае 16: 9).

Обратите внимание на пустое пространство вверху и внизу экрана.Мы можем исправить это, растянув область просмотра видео, чтобы она была больше, чем область просмотра браузера. Мы сделаем его выше или шире в зависимости от соотношения сторон окна просмотра браузера. Мы можем добиться этого с помощью медиа-запросов. Выглядит нормально, но теперь, когда мы меняем размер окна, видео не центрируется.

Самый простой способ исправить это — растянуть видео, чтобы оно было выше и шире, чем наш экран, а затем использовать отрицательные поля для его центрирования.

Вот и все! У нас есть полноэкранный видео фон для нашего сайта!

Еще одна вещь, которую мы должны сделать, — это скрыть видео на мобильном устройстве и просто показать фоновое изображение.Это связано с тем, что большинство мобильных платформ не воспроизводят видео HTML5 автоматически и отображают его со встроенной кнопкой воспроизведения поверх нашего контента. В этом примере мы будем использовать то же изображение, которое используется для атрибута постера в видео. Помните, что использование display: none в элементе видео не помешает его загрузке.

Окончательный CSS

ДЕМО СТРАНИЦА

ПРИМЕЧАНИЕ: Видео, используемое в этой демонстрации, было взято по этой ссылке.

Больше сообщений о фоновых видео

— Советы по использованию фоновых видео в Интернете
— Создание полноэкранного списка воспроизведения фонового видео HTML5

Обновление статьи — 8 января 2016 г.

Когда я писал исходную статью, я пытался избежать использования CSS3-свойства преобразования , так как я знал, что оно не поддерживается в IE8.Одна вещь, которая тогда ускользнула от меня, заключалась в том, что видеоэлемент HTML5 также не поддерживается в упомянутом браузере.

Итак, избавившись от IE8, давайте упростим CSS, используемый для создания полноэкранного видео фона, с помощью преобразования CSS3 .

Как видите, мы удалили медиа-запросы с соотношением сторон и вместо этого использовали преобразование в нашем видеоэлементе (.fullscreen-bg__video). Поведение полноэкранного фонового видео остается таким же, как вы можете видеть на этой ДЕМО СТРАНИЦЕ (которая имеет ту же разметку HTML, что и первая).

Этот новый код будет работать во всех основных браузерах. Как я уже сказал, он не будет работать в IE8, так как он не поддерживает свойство преобразования CSS3. Но вам не нужно беспокоиться об этом, поскольку IE8 также не поддерживает элемент видео HTML5. Поэтому, если вы не планируете использовать альтернативные варианты для элемента видео, используйте новый код.

50 бесплатных видео фонов для следующего звонка Zoom

С ростом числа видеоконференций, удаленной работы и социального дистанцирования всем нам нужно больше бесплатных виртуальных фонов для Zoom в нашей жизни.Хотите ли вы пообщаться со своими коллегами, спланировать винный вечер или просто порадовать публику, есть фоновое видео Zoom для всего, что вам нужно. А если нет, вы всегда можете создать онлайн-видео, соответствующее вашему настроению.

Wibbitz с видео и гифками из Getty Images и многим другим позволяет легко создавать свои собственные или выбирать из этих готовых бесплатных виртуальных фонов для Zoom. Это отличный способ скрыть, что вы действительно работаете из грязной спальни или хотите почувствовать себя где-то еще, кроме как дома.А если вы хотите сделать еще один шаг вперед, создайте собственное видео с помощью наших инструментов. У нас есть вдохновляющие видео, которые помогут вам пережить самые длинные дни удаленной работы.

1. Время круга

Чувствуете, что ходите по кругу? Обнимите его этим очаровательным фоном.

Скачать видео фон

2. Приключения в аквариуме

Расслабьтесь в этом подводном аквариуме, где морские обитатели не нуждаются в социальной дистанции.

Скачать видео фон

3. Давайте танцевать

Эта милая маленькая танцовщица хула делает день немного более расслабленным.

Скачать видео фон

4. Обезьяны около

Каждому нужен друг или маленький человек, чтобы поддержать тебя. И если вы являетесь родителем, участвующим в программе Zoom, вы знаете, что это такое.

Скачать видео фон

5. Дней офиса

Все мы иногда скучаем по офисной жизни, и на этом фоне вы почувствуете себя как дома.

Скачать видео фон

6. Камень приключений

Когда жизнь заставляет вас нервничать, помните, что в то же время она может выглядеть красиво.

Скачать видео фон

7. Маяк света

Где-то во всем этом есть луч света.

Скачать видео фон

8. Большие идеи

Убедитесь, что весь офис знает о ваших очень больших идеях.

Скачать видео фон

9. Сезон цветения сакуры

Возможно, мы пропустили сезон цветения сакуры, но мы все еще помним, как великолепно выглядят цветы.

Скачать видео фон

10.Поблагодарить

Сообщите своей команде, насколько вы цените их упорный труд, с помощью благодарственной записки.

Скачать видео фон

11. Выходные в городе

Почувствуйте себя так, будто вы, наконец, отправились в путешествие в город, на который так надеялись.

Скачать видео фон

12. Vegas, Baby

Когда вы мечтаете сыграть в игровые автоматы, Вегас будет ждать вас.

Скачать видео фон

13. Голубое небо

Даже если из окна вашей квартиры идет дождь, сегодня небо должно быть солнечным и голубым.

Скачать видео фон

14. Кофейный чат

Помните действительно хороший кофе в соседнем офисе? Наслаждайтесь им виртуально.

Скачать видео фон

15.Desert Dreams

Сделайте сегодняшний день более экзотическим, совершив поездку в пустыню.

Скачать Zoom video background

16. Отплыть

Давайте все уплывем из этого карантина в безграничные возможности.

Скачать Zoom video background

17. Вопросы и ответы

Для тех дней, когда вы хотите спросить свою команду: «Что ???»

Скачать Zoom video background

18.Упражнения по тимбилдингу

Кто сказал, что вы не можете наслаждаться тимбилдингом виртуально?

Скачать Zoom video background

19. Собачьи дни

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

Скачать Zoom video background

20. Дождливые дни

Сделайте следующий дождливый день в домашнем офисе вдохновляющим.

Скачать Zoom video background

21.Милашка в розовом

Жизнь заслуживает поблажек, особенно если они розовые.

Скачать Zoom video background

22. Роуминг вокруг

Примите решение путешествовать, даже если вы застряли дома.

Скачать Zoom video background

23. Волшебные моменты

Сделайте свой звонок Zoom наполненным волшебными моментами.

Скачать Zoom video background

24.Божья коровка путешествие

Простые удовольствия в жизни часто оказываются самыми стоящими.

Скачать Zoom video background

Хотите еще несколько вдохновляющих видео?

Посмотрите, как сотни ведущих брендов используют Wibbitz для создания профессиональных видеороликов для маркетинга, развлекательных новостей, контента о стиле жизни и многого другого!

Смотреть видео

25. Иллюминированный Париж

Если ваша командировка в Париж была отменена, вам это понадобится.

Скачать Zoom video background

26. Я нервничаю

Сделайте жизнь снова немного игривой и причудливой.

Скачать Zoom video background

27. Страсть к путешествиям

Для тех из нас, кто серьезно страдает страстью к путешествиям.

Скачать Zoom video background

28. Тихое суждение

Этот пушистый друг готов незаметно судить ваших коллег по Zoom в чате у камина.

Скачать Zoom video background

29. Последний рубеж

Мы все еще можем покорить мир с помощью Zoom-звонка дома.

Скачать Zoom video background

30. Свободное падение

Иногда кажется, что жизнь находится в свободном падении, но мы все в этом вместе.

Скачать Zoom video background

31. Чайная церемония

Давайте вернем традиции и класс в наши дни.Кто-нибудь чай?

Скачать Zoom video background

32. Тропический рай

После следующей конференц-связи вас ждет тропический рай.

Скачать Zoom video background

33. Лунный свет на берегу моря

Давайте сегодня вечером сделаем немного магии Zoom.

Скачать Zoom video background

34. Дикие лошади

Дикие лошади не могли удержать нас от следующего звонка Zoom.

Скачать Zoom video background

35. Ночь вина

Ура! Где-то всегда бывает винная ночь.

Скачать Zoom video background

36. Друзья навсегда

Пусть ваши друзья знают, что этот карантин может быть не вечным, но ваша дружба навсегда.

Скачать Zoom video background

37. Победитель забирает все

Когда вашей команде нужно напоминание, вы почти на финише и все вы победители.

Скачать Zoom video background

38. ЙОЛО

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

Скачать Zoom video background

39. Следуй за лидером

Подавайте пример, а остальные последуют за вами.

Скачать Zoom video background

40. Собачий бег

Нам всем нужно подышать свежим воздухом, может, он тоже будет очаровательным.

Скачать Zoom video background

41. Тихий сад

Найдите время для мира и спокойствия сегодня.

Скачать Zoom video background

42. Заводное чудо

Кто сказал, что вы не можете чувствовать себя круто, покоряя день?

Скачать Zoom video background

43. Папарацци

Почувствуйте себя знаменитостью во время следующего звонка в Zoom.

Скачать Zoom video background

44. Ленивые дни

Получите заслуженный отдых и расслабление сегодня.

Скачать Zoom video background

45. Славный закат

Мы все еще можем выйти на улицу и увидеть восход и закат, но теперь это можно делать и с помощью Zoom.

Скачать Zoom video background

46. Воздушные шары голубого неба

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

Скачать Zoom video background

47. Фейерверк

Хотите сделать важное объявление? Пусть начнется фейерверк!

Скачать Zoom video background

48. Последний круг

Мотивируйте свою команду продолжать этот последний круг.

Скачать Zoom video background

49. Обед

Когда у вас обеденное свидание в Zoom, вы должны чувствовать себя именно так.

Скачать Zoom video background

50. День запуска

Отметьте свой большой запуск вместе с командой.

Скачать Увеличить фон

С правильными бесплатными виртуальными фонами для Zoom и только временем вы можете превратить свой следующий звонок в приключение.

ВЕБИНАР: Как команды маркетинга и контента корректируют стратегии для COVID-19

Узнайте, как лидеры по контенту из Ceros, Bizzabo и Cincopa меняют стратегии и улучшают взаимодействие в команде, работая удаленно в эти беспрецедентные времена.

Посмотреть запись вебинара

Top 5: Лучшие плагины фонового видео для javascript

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

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

Внимание! , независимо от мощности вашего компьютера, не открывайте все демонстрационные вкладки, так как производительность вашего браузера заметно снизится, поскольку эта функция требует много ресурсов.

Github | Демо

Vidbg — это крошечный плагин для воспроизведения видео на фоне элемента dom.

Важно отметить, что предоставление файлов .webm и .mp4 значительно улучшит совместимость браузера, и это настоятельно рекомендуется.

• Работает во всех современных браузерах.
• IE9 +.
• Видео будет воспроизводиться на настольных компьютерах и ноутбуках, а на мобильных устройствах (планшетах, телефонах и т. Д.) Будет использоваться резервное изображение (плакат).

Github | Демо

Этот плагин позволяет легко добавлять на веб-сайты фоновое видео, подходящее для заполнения. Он может воспроизводить беззвучное фоновое видео (или серию видеороликов). Или используйте его как плеер, чтобы показать плейлист видео. BigVideo.js также может показывать большие фоновые изображения, что удобно для показа больших фоновых изображений для устройств, на которых нет автовоспроизведения для окружающего видео.BigVideo.js построен поверх Video.js от zencoder.

Github | Демо

CoverVid очень легкий, всего 800 байт Javascripts. Его можно использовать в собственном Javascript и jQuery. Его логика основана на родительских элементах, то есть родительский элемент может иметь любой размер (не обязательно только полноэкранный фон).

Важно отметить, что видео, на которое вы нацеливаетесь, будет использовать свой родительский элемент для масштабирования. Имея это в виду, мы создадим простую разметку и добавим базовый стиль для изменения размера родительского элемента / элемента-оболочки видео.

Github | Демо

Vide — это плагин jQuery для добавления видео в качестве фона элемента dom.

• Поддерживаются все современные настольные браузеры.
• IE9 +
• iOS воспроизводит видео из браузера только в родном плеере. Так что видео для iOS отключено, будет использоваться только полноэкранный плакат.
• Некоторые устройства android воспроизводят видео, некоторые нет — поймите. Так что видео для android отключено, будет использоваться только полноэкранный плакат.

Плагин Vide изменяет размер при изменении размера окна. Если вы будете использовать что-то вроде https://github.com/cowboy/jquery-resize, он автоматически изменит размер при изменении размера контейнера. Или просто используйте метод resize (), когда вам нужно. Установите для параметра изменения размера значение false, чтобы отключить автоматическое изменение размера.

Github | Демо

Bideo.js — это библиотека JS, которая позволяет очень легко добавлять полноэкранные фоновые видео. Он поможет вам воспроизводить видео на фоне контейнера или самого тега , и он работает даже в последних мобильных браузерах.

Видео может загружаться через несколько секунд, особенно потому, что источники добавляются через JS, который вы загружаете после загрузки DOM. А пока вы можете захотеть показать обложку видео, которая будет такой же, как первый кадр или видео (или какое-то другое изображение). Поддержки для этого нет в плагине, поскольку это довольно просто сделать с помощью только HTML / CSS (как и наложения).