Video Background works only in Browser but not on Device?

Ionic Framework ionic-v3
1

Hy guys i really tryed alot but i cant get it to work.
I want to create a video background.
My problem is that in Browser it works fine but in Ionic View Android/iOS AND native on Android/iOS it doesnt work.
The Video is stored in assets/video/videobackground.mp4.
The Video also is in H.264 Codec.

Here is what i tried:

  <video webkit-playsinline autoplay loop muted id="backgroundvideo">
    <source src="../assets/video/backgroundvideo.mp4" type='video/mp4; codecs="h.264"'>
    <source src="../assets/video/backgroundvideo.webm" type="video/webm">
  </video>

Css:

backgroundvideo {
    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('../assets/video/backgroundvideo.mp4') no-repeat;
    background-size: cover;
}

config.xml:

  <preference name="AllowInlineMediaPlayback" value="true" />
  <preference name="MediaPlaybackRequiresUserAction" value="false"/>

EDIT:
In chrome Inspect i got this Error:
file:///android_asset/assets/video/backgroundvideo.webm Failed to load resource: net::ERR_FILE_NOT_FOUND

2

Try setting the source without ../, worked for me when it came to images

<source src="assets/video/backgroundvideo.mp4" type='video/mp4; codecs="h.264"'>
<source src="assets/video/backgroundvideo.webm" type="video/webm">
1 Like
3

Well it worked. Thank you so much you always got the right answers! :slight_smile:

4

Hey lukasrein97, could you please tell me where did you insert you html video tag? Was it inside of ion-content of the Page?

My video is being loaded as I can check in the inspector, but my background is all white…

Thanks in advance

5

hi @hugoabreu
i have to much code so i give you an small example how you could do it:

<ion-content>
 <div class="backgrounddiv" style="width:100vw;height:100%;margin-top:0px;padding:0px;">
  <video webkit-playsinline playsinline autoplay loop muted id="backgroundvideo">
    <source src="assets/video/backgroundvideo.mp4" type='video/mp4; codecs="h.264"'>
    <source src="assets/video/backgroundvideo.webm" type="video/webm">
  </video>
  //HERE GOES YOUR CONTENT OF YOUR PAGE

</div>
</ion-content>

CSS:

.backgrounddiv{
background-image: linear-gradient(0deg, transparent);
background-size: 1800% 1800%;
 }

#backgroundvideo {
    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('../assets/video/backgroundvideo.mp4') no-repeat;
    background-size: cover;
}

Make sure to have a background MP4 Video and a WEBM Video.
If you dont have one you can Convert it with many online Converters from mp4 to webm!

Also with this settings:
<video webkit-playsinline playsinline autoplay loop muted id="backgroundvideo">
Your Video will autloop without sound and any control buttons :slight_smile:

EDIT:
If you want to know i created a folder “video” in src -> assets -> video. In this Video Folder i insert my Videos.

I hope this helped you! :slight_smile:

1 Like
6

It helped a lot! It’s working now, it was the lack of the webm file. Thank you very much :wink:

2 Likes
7

no problem glad it works!

8

If you want your background video to run on every device without having to encode the video yourself you should upload it to a service like BrowsePlay and embed their player snippet into your site.

I twill work on desktop and mobile without any issues and it updates with new browser releases.

http://browseplay.com

9

I have on ionic 3, Android emulator does not work(((