Скачать HD-фоны на Unsplash
Более 900 фоновых изображений для веб-сайтов: Скачать HD-фоны на UnsplashИсследовать › Фоны › Приложение › Веб-сайт
Ищете красивые изображения для своего веб-сайта? Unsplash позаботился о вас. Найдите идеальный фон для веб-сайта из нашей огромной коллекции изображений профессионального качества. Каждый можно использовать бесплатно!
Животные фоныХудожественные фоныЦветные фоныМилые фоныПрирода фоны
луна выходит на дорогуusaut
Виллиан Юстен де Васконселлос
japanshinjuku cityneon light
–––– –––– –––– – –––– ––––– –– –– –––– – – –– –– – –– –––– – –.
TAAN HUYN
Вьетнамхо Чи Минхсайгонесе
Джонатан Борба
Hatbathingbeard
Polina Shirokova
Mrushigirl Images
и изображения
Mrushygirl Images
.0003
Mesut çiçen
People images & picturesheadface
Orgalux
drawerorganized drawerdrawer inserts
mos design
neon signdrinker’s paradisetokyo ikebukuro
Il Vagabiondo
streetgiapponejapan street
Àlex Folguera
londressaint paul’s cathedralreino unido
codenverNature images
Мартин Бенни
Баллатерлох Муйкук
Виллиан Юстен де Васконселлос
tokyokabukichojapanese lanterns
Megan Ruth
iaWomen images & picturesdes moines
Jonathan Borba
capswimwearswimming
Taan Huyn
ho chi minh cityhồ chí minhvietnamese girl
Polina Shirokova
санкт-петербургHd kids wallpapershistory
Ali Dadras
иранфотография фоторедактирование
–––– –––– –––– – –––– ––––– –– – –– –––– – – –– ––– –– –––– – –.
луна с видом на роудусаут
vietnamho chi minhsaigonese
russiagirl aloneButterfly images
People images & picturesheadface
streetgiapponejapan street
ballaterloch muickuk
iaWomen images & picturesdes moines
ho chi minh cityhồ chí minhvietnamese girl
iranphotographyphoto editing
japanshinjuku cityneon light
шапкакупаниеборода
утропостельное белье
Детские изображения и фотографииЛюди изображения и изображения
drawerorganized drawerdrawer inserts
neon signdrinker’s paradisetokyo ikebukuro
londressaint paul’s cathedralreino unido
codenverNature images
tokyokabukichojapanese lanterns
capswimwearswimming
санкт-петербургHd kids wallpapershistory
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Moon Over RoadUsaut
Hatbathingbeard
Baby images & photosPeople images & images
neon signdrinker’s paradisetokyo ikebukuro
londressaint paul’s cathedralreino unido
ballaterloch muickuk
capswimwearswimming
iranphotographyphoto editing
japanshinjuku cityneon light
russiagirl aloneButterfly images
drawerorganized drawerdrawer inserts
streetgiapponejapan street
iaWomen images & picturesdes moines
санкт-петербургHd детские обоиистория
Вьетнамхо Чи Минхсайгонезе
Morningsbedreading
People Images & PictureHeadface
Codenvernature изображения
Tokyokabukichojapanese Lanterns
Ho Chi Minh Cityhồ Chí Minhwietmese Girl
907Ho Chi Minhồshồ Minhwietmese Girl
Лучше, чем любые бесплатные или стоковые фотографии.- О
- Блог
- Сообщество
- Join the team
- Developers/API
- Press
- Help Center
Product
- Explore
- Unsplash Awards
- Unsplash for Education
- Unsplash for iOS
- Apps & Plugins
Popular
- Фоны
- Бесплатные изображения
- Бесплатные стоковые фото
- Картинки с днем рождения
- Классные фото
- Картинки природы
- Черный фон
- White Backgrounds
- Textures
- Desktop Backgrounds
Wallpapers
- HD Wallpapers
- 4k Wallpapers
- iPhone Wallpapers
- Cool Wallpapers
- Cute Wallpapers
- Live Wallpapers
- PC Wallpapers
- Black Wallpapers
- Обои для iPad
- Обои для рабочего стола
- Политика конфиденциальности
- Условия
- Безопасность
- Значок TwitterUnsplash Twitter
- Значок FacebookUnsplash Facebook
- Значок InstagramUnsplash Instagram
Как мы добавляем фоновое видео на нашу домашнюю страницу
Если вы еще этого не видели, мы недавно обновили нашу домашнюю страницу, добавив в нее довольно хорошее видео Истборнского пирса.
Новая функция, над которой мы работали для нашего сайта, чтобы увидеть, сможем ли мы реализовать идею для работы с нашей CMS и с видео, которое мы сняли. Мы надеемся, что вы согласитесь, что это выглядит довольно хорошо. Здесь я объясню, как мы это сделали.
[Изменить]
Недавно мы удалили видео с главной страницы. Вы можете просмотреть нашу копию с видео здесь.
Поиск видео
Сначала мы поэкспериментировали с видео из личных коллекций. Вы можете увидеть нашу первую демонстрацию фонового теста, это не полностью рабочая версия, поэтому не ожидайте, что мобильные устройства и все браузеры будут работать, но хром работает.
После того, как нам удалось доказать, что мы можем заставить его работать, мы приступили к планированию того, какое видео мы могли бы отображать на нашем веб-сайте, чтобы улучшить впечатление посетителей, что является ключевым моментом. Нет смысла просто размещать видео только потому, что вы можете. Он должен иметь смысл, должен быть релевантным и улучшать впечатления посетителей от вашего сайта, а не мешать.
Нам нужно было что-то местное для BarkWeb, поэтому мы прогулялись до набережной Истборн с приличной камерой, способной снимать HD-видео. Не беспокойтесь о звуке, так как мы уберем его позже. Штатив также полезен для таких видео, так как мы будем зацикливать его.
Преобразование видео для Интернета
Во-первых, вам нужно получить исходное видео, после чего вам нужно преобразовать его в форматы MP4, OGG и WEBM. Вам нужны эти разные форматы, чтобы вы могли охватить как можно больше веб-браузеров и устройств, которые их поддерживают.
Вам также необходимо изображение для отображения, если поддержка видео недоступна.
Сначала мы вырезали видео с помощью Premier Pro, а затем использовали VLC для преобразования наших видео AVI и MP4 в различные версии, которые нам требовались. VLC бесплатен. Если вы записываете отснятый материал самостоятельно, большинство устройств поставляются с программным обеспечением, которое позволит вам редактировать и обрезать видео.
Быстрый поиск альтернатив в Google будет самым простым способом, если вышеуказанные варианты недоступны или не работают на вашей платформе.
В приведенном ниже видеоролике на YouTube показано, как создавать видео каждого типа с помощью VLC.
В основном вам понадобятся следующие профили:
Видео — H.264 + MP3 (MP4)
Видео — VP80 + Vorbis (Webm)
Видео — Theora + Vorbis (OGG)
Убедитесь, что вы сняли флажок с аудио так как мы хотим удалить его, так как его раздражает наличие на веб-сайте, который загружается и уменьшает размер файла, удаляя его.
Вставка HTML и CSS
Когда у нас есть все необходимое, мы вставляем следующий код в наш HTML, где мы хотим, чтобы видео появилось. Измените пути и заголовки по своему усмотрению. Плакат — это альтернативное изображение, когда видео не воспроизводится. Вы можете видеть, что мы установили цикл и автовоспроизведение.
<дел>
баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
#bgvid { дисплей: нет; }
}
/* исправить фоновые изображения ios */
/* Ipad мини */
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (-webkit-min-device-pixel-ratio: 1) {
.баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
#bgvid { дисплей: нет; }
}
/* айпад в альбомной ориентации */
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (ориентация: альбомная) {
.баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
#bgvid { дисплей: нет; }
}
/* айпад портрет */
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (ориентация: книжная) {
.
