Html5 video not being rendered on Android, getting sound only!

1

Hi there,

I really need to show an introduction video in my app on ios & android, but I haven’t been able to get it working properly.

Closest I’ve come is by using the Android Html5Video plugin for cordova, but I’m still getting sound only.
First I thought maybe hardware acceleration was disabled, but AndroidManifest already had android:hardwareAccelerated="true" by default.

Does anyone know why html5 video isn’t being displayed on Android? Are there other ways to show video?

Thanks

2

Might be some codec problem. Have you tried another video, maybe encoded in another format?

3

Yes, I’ve tried different videos and formats (mp4, ogg, webm) with the same results. I’m using a Samsung SII with Cyanogen, if that matters.

Is it even possible to get video working on android with ionic?

4

Just tested the instructions on the plugin page and its working. Android Lollipop 5.0.1 stock.
What I did:

Added the plugin:
$ ionic plugin add https://github.com/jaeger25/Html5Video.git

Created a holder for my video on home page:
<video id="video1" loop></video>

Added the JS code:

$ionicPlatform.ready(function() { window.plugins.html5Video.initialize({ "video1" : "video1.mp4" }); window.plugins.html5Video.play("video1"); });

Created a folder called raw on platforms\android\res\raw
Moved the video to platforms\android\res\raw\video1.mp4

ionic run android gave me the video playing.

FYI. I’m using Crosswalk and IONIC RC1. The file I’m using is http://techslides.com/demos/sample-videos/small.mp4

5

When I tried Crosswalk yesterday I ran into an unsolved issue on Samsung phones that caused the bottom portion of the page to look glitched (see https://crosswalk-project.org/jira/browse/XWALK-3284). I also had problems with the app freezing Android completely on either the first page or after transitioning to the second page. I’m not sure Crosswalk is ready yet for production.

Also, Crosswalk is Android only, right? I’d like a solution that works on ios as well.

Thanks for your help

6

So its not a question of do videos work with ionic, but with angular/mobile webview.

I’ve used videos before, without issues, but just prefixed the source location with /android_asset/www/ on android.

Could you share some code so that we can see what you have so far?

7

I downloaded this video clip for testing: http://www.808.dk/vstreamer.asp?video=gizmo.mp4

Saved it to platforms\android\res\raw\gizmo.mp4 as per instructions of the html5 video plugin.

Controller:

.controller('IntroCtrl', function($scope, $state)
{
  var video = document.getElementById('introVideo');

  // start video when entering view
  $scope.$on('$ionicView.enter', function() {
    if (ionic.Platform.isAndroid()) {
      window.plugins.html5Video.initialize({ 'introVideo' : 'gizmo.mp4' });
      window.plugins.html5Video.play('introVideo', null);
    }
  });
})

Html:

<ion-view hide-nav-bar="true">
  <ion-content class="text-center" scroll="false" style="background:black;">
    <video width=100% height=100% id="introVideo"></video>
  </ion-content>
</ion-view>

Result: Audio only playback.

Thanks for taking a look at my code!

8

Can you check these answers?

9

Ok, so it turns out that html5 video in my app does work on a newer phone (one plus), same android version (4.4.4)! However, I do need to support older models as well (including Samsung s2).

Next thing I tried was the crosswalk browser with ionic browser add crosswalk. It worked, video was now visible… but the app completely froze my phone after that. So I guess crosswalk is still not an option for me.

I think I might have to give up on html5 video, I will try the https://github.com/macdonst/VideoPlayer plugin next.

Edit: Ok that plugin works, but it shows the user a dialog for what program to use instead of immediately playing the video, so I’m still looking for a better solution.

10

I have a similar issue here. First I wasn’t able to get the video playing at all, then after switching to the html5Video plugin, I managed to get the sound working but still no video.

I tested this on a Galaxy S4 on CM12, with the latest Crosswalk build added to the project.

One clue is that it is said in another post that [quote=“datawaslost, post:5, topic:10096”]
iOS will recognize an MP4 file as a video without the proper content-type, but not Android.
[/quote]

So I tried to specify a type=“video/mp4” on the video element, with no luck. Plus I can see from the network tab in ChromeDev that the content is still read as an “Application/Octet-stream” …

Anyone having a similar behavior ?

11

@doeke, do you come cross any better solution for solving this issue?

12

Thanks @vicmota,
Just to confirm, following your steps is also working for me

13

Anyone able to get this to work on Android 4.4.4 with or without crosswalk?

I have local videos playing in the html5 video element on Android 4.2.2, 4.3, 5.0.0, and 5.1.0. Without crosswalk.

<video poster="{{localVidPoster}}" ng-src="{{localVidURL | trusted}}" type="video/mp4" controls></video>

not sure the filter is really necessary or not, but got that from: http://stackoverflow.com/questions/21292114/external-resource-not-being-loaded-by-angularjs

When I try this with 4.4.4 it will not play the video. In the network tab of the developer tools I see the GET request for the video was canceled. To verify that the file was accessible, I added a link to the video file that opened the video in the device video player (but only the audio plays. When I go to full screen I see the video and hear the audio.)

I am storing my videos here: file:///data/data/appname/files/video/4292658792001.mp4
also tried here: file:///data/data/appname/raw/4292658792001.mp4
Using Genymotion to emulate the different OS versions.

1 Like
14

Update:
I ended up switching to Videogular and installing crosswalk. Now video is working on Android 4.2.2, 4.3, 4.4.4, 5.0.0, and 5.1.0

15

Could you please show us a plunkr how you get Videogular running with ionic?

1 Like