Создайте приложение Ionic Angular с видео в фоновом режиме.
Знаете, что круто? Приложение с фоновым видео. Он обеспечивает глубину, выглядит профессионально и создает техничное/крутое чувство.
Шаги, показанные в этих инструкциях, будут очень похожи на то, как это делается в типичном веб-проекте HTML, поскольку используемый здесь тег ‹video› взят непосредственно из HTML5.
Шаг 0: Запустите проект Ionic Angular
Если вы не знакомы с Ionic, ознакомьтесь с ним, так как это самый простой способ легко приступить к разработке мобильного или веб-приложения. Если вы хотя бы знакомы с веб-разработкой, будь то HTML, CSS и/или JavaScript, это самый простой способ начать разработку мобильных приложений с помощью Ionic:
Версии, которые я использую для этого приложения:
Ionic CLI версии 6.20.1
Ионная версия 6.2.2
Шаг 1. Определите, будет ли ваше приложение в альбомной или портретной ориентации.
Если вы создаете приложение в альбомной ориентации, очевидно, вам потребуется видео, снятое в альбомной ориентации, желательно без почтового ящика, потому что мы не используем его для фильма Лоуренс Аравийский , заметьте, это будет фоном нашего приложения. И наоборот, если вы создаете приложение в портретном режиме, идеально подойдет видео, снятое или подготовленное в портретном режиме.
После того, как вы определили режим, в котором будете создавать свое приложение, вам нужно будет найти подходящее видео. Быстрый поиск в Google рекомендует pexels.com. YouTube — еще один отличный ресурс для бесплатных видео, если вы знаете, где искать. Конечно, само собой разумеется, чтобы избежать обращения в суд, убедитесь, что у вас есть разрешение и / или убедитесь, что видео не защищено авторскими правами.
В конечном счете, от вас зависит, где вы приобретете видео. Я лично рекомендую использовать Canva, так как она подходит для моих нужд в легком поиске портретного или пейзажного видео, или, вы знаете, вы всегда можете взять камеру телефона и снять марширующих муравьев, листья, качающиеся на ветру, или пробку на закате, что-то в этом роде. Ничего особенного, привлекающего внимание, потому что это видео будет фоновым.
Для типа видеофайла я обычно использую видео в формате .webm или .mp4. Нет, я не пробовал .gif и не уверен, что .gif сработает в этом случае, но попробуйте.
Убедитесь, что размер видеофайла не слишком велик (в идеале менее 1 или 2 МБ), и убедитесь, что он удобен для повторения, так как мы будем повторять это видео снова и снова.
Шаг 2. Поместите видео в папку с ресурсами
В папке с ресурсами создайте новую папку, в данном случае мы создадим папку videos . Поместите выбранное видео в только что созданную папку assets/videos/.
К вашему сведению, размещение видео в любом месте в папке assets сделает видеофайл доступным для локального использования в вашем приложении Ionic, но в интересах организации я рекомендую помещать вещи в папки.
Шаг 3: Создайте div и измените его в scss
В html-файле сделайте следующее:
home.component.html:
<ion-content style="overflow: hidden"> <div class="backgroundLayer"> <video #videoPlayer preload="auto" autoplay="true" width="100%" height="100%" muted="muted" loop="true"> <source src="../../assets/backgroundVid.mp4" type="video/mp4" /> </video> </div> <!--Rest of you app goes here--> </ion-content>
Автовоспроизведение, зацикливание и отключение звука гарантируют, что видео будет автоматически воспроизводиться, зацикливаться и отключаться при входе на страницу.
В соответствующем файле scss, чтобы убедиться во всем, добавьте стили для класса backgroundLayer:
home.components.scss
.backgroundLayer {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
Установка z-index на -1 в scss гарантирует, что видео останется на заднем плане под любыми слоями, которые у вас могут быть.
Чтобы убедиться, что видео будет воспроизводиться автоматически, когда пользователь заходит на страницу каждый раз, а не только в первый раз. Добавляем в home.page.ts следующие коды:
...
export class HomePage implements OnInit {
@ViewChild('videoPlayer') mVideoPlayer: any;
...
async ionViewWillEnter() {
const video = await this.mVideoPlayer.nativeElement;
await video.muted;
await video.play();
}
Будучи приложением Ionic и придерживаясь жизненного цикла Ionic, мы используем ionViewWillEnter() для воспроизведения и отключения видео при каждом входе на эту страницу.
Вот и все! Теперь у вас есть фоновое видео, которое делает ваше приложение в 10 раз круче и живее. Используя теги <video>, мы можем создать фоновое видео в нашем приложении Ionic Angular.
Селамат Менгатуркара
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
