Хотите воспроизвести видео в полноэкранном режиме на своей домашней странице? Это видео используется в качестве фона веб-страницы и не влияет на обычный просмотр веб-контента. Тогда позвольте мне сказать вам, что есть библиотека Javascript, которая соответствует вашим потребностям, — это Bideo.js.
характеристикаАвтоматическая настройка: Bideo.js может автоматически регулировать размер видео в соответствии с размером текущего окна браузера. Когда окно браузера настраивается, оно адаптируется к размеру окна. И мобильная сторона, и компьютер могут автоматически настраивать видео. может использоваться в качестве фона и отображаться в полноэкранном режиме.
Наложение: после того, как видео используется в качестве фона веб-страницы, мы можем разместить любой HTML-контент поверх видео.
Обложка видео: при открытии страницы загрузка видео может занять несколько секунд. Затем мы можем установить изображение в качестве обложки видео и дождаться его загрузки перед воспроизведением.
HTMLДобавьте следующий HTML-код в тело вашей страницы. Очевидно, что тег <video> используется для загрузки видео, атрибут «loop» относится к циклическому воспроизведению видео, а «muted» относится к режиму отключения звука, то есть громкость равна 0. #video_cover — обложка видео по умолчанию. #overlay — это слой маски, на котором отображается все остальное содержимое страницы.
<div id=container> <video id=background_video цикл отключен></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <section id=main_content> <div id=head> <h1>HTML5 легко реализует полноэкранное фоновое видео — Bideo.js</h1> <p class=sub_head>Библиотека Javscript, которая позволяет легко добавлять на страницу полноэкранное фоновое видео </p> <p class=info>(Подождите, видео загружается некоторое время.)</p> </div> </section></div>
Мы также добавили #video_controls, который используется для управления воспроизведением и паузой видео, подходящий для мобильных телефонов. Наконец, в следующем разделе вы можете добавить любой HTML-контент, который хотите отображать.
CSSCSS также имеет решающее значение. Наиболее важные вещи, на которые следует обратить внимание, — это настройки #container и #background_video. Следующий CSS-код можно взять напрямую без пояснений:
* { поле: 0; заполнение: 0;} HTML, тело { ширина: 100%; высота: 100%; переполнение: скрыто;} # контейнер {переполнение: скрыто; положение: верхнее: 0; : 0; внизу: 0; высота: 100%;}#background_video { позиция: абсолютная; вверху: 50%; преобразование: транслировать (-50%, -50%; объект-подгонка: высота обложки: 100%; ширина: 100%;}#video_cover { позиция: абсолютная; ширина: 100%; фон: url('video_cover.jpeg') нет -repeat; размер фона: обложка; позиция фона: центр;}#overlay {позиция: абсолютная; справа: 0; внизу: 0; rgba(0,0,0,0.5);} JavascriptСначала загрузите библиотеку Bideo:
<script src=bideo.js></script>
Затем создайте экземпляр bido: new Bideo(), затем инициализируйте загрузку напрямую и установите следующие параметры:
(function () { var bv = new Bideo(); bv.init({ // Видео-элемент videoEl: document.querySelector('#background_video'), // Контейнер элемента-контейнера: document.querySelector('body'), / / Изменение размера адаптивной настройки: true, // автозапуск: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'),pauseButton: document.querySelector('#pause'), // Загрузите источник видео и замените собственный файл источника видео в соответствии с фактическим бизнес-источником: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', введите: 'video/mp4' }, { src: 'night.webm', введите: 'video/webm;codecs=vp8, vorbis' } ], // После загрузки видео обложка видео будет скрыта onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());Таким образом, красивая фоновая видеостраница завершена. Добро пожаловать, чтобы просмотреть онлайн-демонстрацию и загрузить исходный код. Для получения дополнительной информации о Bideo.js просмотрите адрес проекта github: https://github.com/rishabhp/bideo.js.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.