Thursday 21 July 2016

Video as background in Ionic app

Hello,

Last time,i was facing problem to play a video in background of my app. So, i got the solution for same.

Here i am introducing a way by which you can add this feature in your app-

Follow the following sets of command to start a blank app-

ionic start MyVideoApp blank

cd MyVideoApp

ionic platform add android

Now, add the following lines of code in your index.html file-

 <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
           <video autoplay loop poster="" id="bgvid">
   
    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
   
    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4">
   
    </video>
    <div ng-click="" class="button has-header"> CLICK ME TO PLAY VIDEO</div>
    </ion-pane>
  </body>

Now, add following lines of in your style.css file-

#bgvid {

position: fixed;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

background: url(http://video.webmfiles.org/big-buck-bunny_trailer.webm) no-repeat;

background-size: cover;

}


Now,you can play video in your app.



Thanks....

No comments:

Post a Comment