Intro video playback on iOS/Android


#1

Hey guys,

In my app, there’s a requirement to get a video to play before opening the app. I want to play it after the default splash screen, on fullscreen, and after it ends playing, show the app itself.
On the browser, the video plays and redirects to the main controller correctly.
On iOS i can the video plays but it shows the controls (unwanted) and it does not redirect to the main controller when the video is finished. This is the code i’m using:

splash.html

<ion-view view-title="splash">
  <video id="splashVideo" src="video/output.m4v" class="fullscreen-player" autoplay="autoplay">
  </video>
</ion-view>

splashCtrl.js

.controller('splashCtrl', function($scope) {
  var video = document.getElementsByTagName('video')[0];
  video.play();
  video.onended = function(e) {
    window.location.href = "/#/tab/home";
    console.log('testing');
  };

config.xml

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

I know this is possible on native iOS as i’ve seen it plenty of times. Is this possible on ionic? What would be the best way to do this?


#2

I managed to remove the controls by adding webkit-playsinline:

<video id="splashVideo" src="video/output.m4v" class="fullscreen-player" autoplay="autoplay" webkit-playsinline>

Now i need the app to redirect, which it’s not doing. It is entering the onended function, but it’s not changing the location. Any ideas?


#3

Hi @andiCR did you ever get this figured out?