4

Video mp4 or any format as a splash screen on hybrid app like phone gap/cordova. like current Ubber App

Khaled Awad
  • 1,644
  • 11
  • 24
user3541151
  • 51
  • 5

4 Answers4

1

I know i am quite late, But you can use the HTML5 tag to play a video after the document is loaded. Listen to event(video end) to hide the video and show the content that comes after the splash

Here is a sample

<div id="splashVid" class="centerpage" style="overflow:hidden; display:block">
    <video width="100%" autoplay onended="splashEnd();">
        <source src="BT-logo-splash.mov" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

Within the function "splashEnd()" you can write what you want to do when the splash video ends

Also In my case the video is available locally within the app bundle. In case you are using a URL make sure to listen to other events for the tag to make sure that the user does not has to face buffering at the beginning of app launch.

Sunil agarwal
  • 11
  • 2
0

It is not possible to put mp4 or gif file as splash screen in phonegap/Cordova. You can load directly index.html page, There u can play video and you can navigato next page.

Hope it will help u.

Naresh Kumar
  • 938
  • 5
  • 12
0

This is your splashscreen.html and splashscreen.js,include them in your app and redirect on home page after video playing is completed by setting setTimeout time 

$(document).ready(function(){
         var url = $('iframe').attr('src');
         url = url+'?autoplay=1';
  $('iframe').attr('src', url);

        setTimeout(function(){
                //location.href="home.html";//redirect to home from here,you can set timeout to the video length
alert("video Completed");
            },5000);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Akshay Tilekar
  • 1,910
  • 2
  • 12
  • 22
0

The cordova splashscreen is a native dialog which is shown while the hybrid application is being loaded in the webview. At least this should be the correct usage.

Any solution about showing HTML videos/animtions, etc. are about showing them in the webview. So it isn't usefull at all.

The best solution would be forking the cordova splash screen plugin and add videos supports.

José Antonio Postigo
  • 2,674
  • 24
  • 17