The following are the instructions to add a video with autoplay in the background:
- Create a new VideoIntro app using the blank template, as follows, and navigate to the VideoIntro folder:
$ ionic start VideoIntro blank $ cd VideoIntro
- You will need to have your video ready at this point. However, for this example, let's download a free video from a public website that does not require a license. Navigate to http://www.coverr.co.
- You can download any video. The example in this app uses the Blurry-People.mp4 clip. Download it to your computer:
- Save the videos in ./src/assets/:
- Open the ./src/index.html file and replace the content with the following code:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon"
href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Lobster'
rel='stylesheet' type='text/css'> <!-- cordova.js required for cordova apps --> <script src="cordova.js"></script> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); } </script>--> <link href="build/main.css" rel="stylesheet"> <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/
animate.css/3.5.2/animate.min.css"> </head> <body> <!-- Ionic's root component and where the app will
load --> <ion-app></ion-app> <!-- The polyfills js is generated during the build
process --> <script src="build/polyfills.js"></script> <!-- The bundle js is generated during the build
process --> <script src="build/main.js"></script> </body> </html>
Basically, the main difference with the original index.html file is that you want
to include the Google Lobster font for the heading text and animate.css
for animation.
- For the main template, you can modify the ./src/pages/home.html file and replace it with the following code:
<ion-content class="home">
<div class="fullscreen-bg">
<video class="fullscreen-bg__video" autoplay loop
muted webkit-playsinline><source src="assets/Blurry-People.mp4"
type='video/mp4; codecs="h.264"'><source src="assets/Blurry-
People.webm"
type="video/webm">
</video>
</div>
<div class="center animated zoomIn">
<h1>Beautiful App</h1>
<h2>Fast. Easy. Cheap.</h2>
</div>
</ion-content>
There are only two important items on this page: the video and the header with the subheader.
- Open and edit the ./src/pages/home/home.scss file in the same folder using the following code:
page-home {
.home {
font-family: 'Lobster', cursive;
color: white;
text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray, 1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray;
h1 {
font-size: 5rem;
}
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.center {
top: 50%;
transform: translateY(-50%);
position: absolute !important;
text-align: center;
width: 100%;
}
}
All animation is done using CSS; thus, you don't need to write any code for the JavaScript file.
- Open the config.xml file, and add the following line within the <widget> tag:
<preference name="AllowInlineMediaPlayback" value="true"/>
- Go to your terminal and run the app with the following command:
$ ionic serve