Android VideoView not showing video since 1.5

[enchev]

<Page>
  <Placeholder creatingView="creatingView" />
</Page>

exports.creatingView = function (args) {
   var v = new android.widget.VideoView(args.context);
   v.setVideoURI(android.net.Uri.parse("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"));

   // This will fix the issue however will prevent placing something on the top of the video like subtitles.
   // v.setZOrderOnTop(true);

   v.requestFocus();
   v.start();
   args.view = v;
}

[enchev]

Hey folks,

As a temporary workaround instead setZOrderOnTop(true) you can use the following:

<Page>
  <Placeholder creatingView="creatingView" />
</Page>

exports.creatingView = function (args) {
   var v = new android.widget.VideoView(args.context);
   v.setVideoURI(android.net.Uri.parse("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"));

   setTimeout(function() {
    v.getParent().setLayerType(android.view.View.LAYER_TYPE_NONE, null);
   }, 100);

   v.requestFocus();
   v.start();
   args.view = v;
}

[Ivshti]

@enchev for now the situation is, that seems to help in order to get the video shown, not but helping with getting elements on the same level shown over it

[enchev]

If these elements are subtitles you can embed them in the VideoView starting from Android 4.4:
http://developer.android.com/about/versions/kitkat.html

[Ivshti]

@enchev thanks for the suggestion, but unfortunately no workaround works for us.

We use the VLC player, implemented as a fork of the nativescript-videoplayer plugin. Also, even if subtitles are fine, we need to overlay bars for seeking / pause over the video. The only hack is to change the size of the video when those bars are shown, but it's bad UX.

For now we've reverted to 1.5 which practically saves our Alpha release :)

[bathejasumeet]

adding the native android.widget.MediaController to the videoView in nativescript 1.7 does not seem to hide it, it overlays perfectly.

    nativeVideoView= new android.widget.VideoView(args.context);
    nativeVideoView.setZOrderMediaOverlay(true);
    nativeVideoView.setZOrderOnTop(true);
    var mediaController = new android.widget.MediaController(args.context);
    mediaController.setAnchorView(nativeVideoView);
    nativeVideoView.setMediaController(mediaController);

as per android docs :

> "The MediaController will create a default set of controls and put them in a window floating above your application. Specifically, the controls will float above the view specified with setAnchorView()"

, I think we should target for achieving this behavior in interim, I mean trying to make the view with controls float over the VideoView like MediaController does.

( @enchev Sorry, I am stumped, don't know where to post since there are two open issues for the same thing in two repositories)

[enchev]

Hey @bathejasumeet,

Don't worry about the exact GitHub issue. Until we fix this it does not matter where we will discuss it - here or in the @bradmartin repo.

What we know so far is that somehow NativeScript modules (most probably Android layouts) are changed between 1.5 and 1.6 and this change affects Android VideoView widget.

We want to know what is changed and why VideoView is affected.

[enchev]

Hey @Ivshti,

@bathejasumeet is right. The native MediaController will overlay perfectly the VideoView in our latest version and combined with built-in subtitles in my opinion will fulfill your scenario completely?

[Ivshti]

@enchev we have our own specific designed controls, so if it's some kind of default widgets, it doesn't suit our needs

as I said, 1.5 works perfectly, so the best option is to focus our efforts on fixing the underlying issue; let me know how we can help

[enchev]

Hey @Ivshti,

You can help by experimenting with different Android layouts and layout params to find what's suits best your case and update this thread when/if you find something.

[bathejasumeet]

@enchev ... I agree with @Ivshti ... custom video controls have a lot of flexibility and there is no point of video view without being able to implement them... @enchev I strongly feel this is about surface view being positioned above another window, and looking to place the video view's surface in the same window should help.

[hshristov]

Hi guys,

I have identified the issue with VideoView. We set Page background internally and with 1.6 we have added improvements that allows you to set borderWidth and borderColor. These background properties are implemented with custom drawable which internally use Canvas API to draw the borders. This happens even if you set solid color as background. In order to draw this custom drawable we change the layer type of the view to hardware if API level is 19+ and software on API <18. This seems to affect VideoView and hides it. So one easy workaround is to use loaded event on Page and set the layer type back to none.

exports.onLoaded = function(args) {
    // args.object is Page instance
    args.object._nativeView.setLayerType(android.view.View.LAYER_TYPE_NONE, null);
}

We will research what we could do to avoid changes to layer type - #1899

[Ivshti]

@hshristov why should this be done if no borderWidth and borderColor are not used?

We'll test the LAYER_TYPE_NONE, but last time we tested, it didn't quite work properly. Perhaps we didn't set it for the page, but on the parent of the video instead

[bathejasumeet]

@hshristov does not work with overlaying other widgets on videoview

[Ivshti]

@hshristov indeed - the result is the same as putting it on top (setZOrderOnTop). The video is visible, but nothing can be overlayed on top. I'm personally trying with a GridLayout, so perhaps there are more layer styles to try out.

@MiroValchev tried different combinations of layer styles a week ago, but didn't manage to get it working.

@hshristov Perhaps you'd have some ideas?

Also, this issue should definitely not be closed. I understand the urge to clean up the issues it but it's very, very far from fixed and it's still keeping our production app on {N} 1.5.

[hshristov]

@Ivshti, @bathejasumeet Before posting I tried the workaround I have provided - I placed GridLayout with VideoView in Placeholder and on a second row - a Label. No overlapping with 1.7.1.
Could you please specify what problem do you see with this approach?

[MiroValchev]

@hshristov can you give a like to a repo with the project you've tested?

[MiroValchev]

@hshristov this is still not working?! I have just updated to 2.1 and there is still this nasty overlap. Can you provide a simple demo of this working properly?

I see that the related issue has been closed:
#1899

[hshristov]

@MiroValchev Could you please attach a project where VideoView is not working?

[MiroValchev]

demo.zip

It's based on Brad Martin's plugin https://github.com/bradmartin/nativescript-videoplayer

[hshristov]

@MiroValchev The demo app shows the video as well as Subtitles be here... below the video.

[Ivshti]

@hshristov you need to use a emulator/device which has an aspect ratio which makes the subtitles stand OVER the video so you can see if the subtitles actually overlay the video and draw over it or not

( @MiroValchev you can mention what genymotion image you're using )

[MiroValchev]

Exactly. Genymotion - 5.1.0 - 768 x 1280 - 160dpi

[hshristov]

Just to be clear here - the original issue was that VideoView was not showing the video.
Your issue is different. The VideoView plugin still calls - this._android.setZOrderOnTop(true); in _createUI method which results in VideoView being always on top. The plug-in should be - no need for this call.

In future please when you have such problems open up new issue describing the exact problem so that it gets resolved faster. The whole time I thought you don't see the video part.

[Ivshti]

@hshristov are you sure the element is visible (and the subtitles overlay it) works without that call?

[MiroValchev]

@hshristov sorry for the confusion. This was discussed in the previous comments:
"@hshristov indeed - the result is the same as putting it on top (setZOrderOnTop). The video is visible, but nothing can be overlayed on top. I'm personally trying with a GridLayout, so perhaps there are more layer styles to try out.

@MiroValchev tried different combinations of layer styles a week ago, but didn't manage to get it working."

Still, I forgot that this workaround was introduced in the plugin in the first place. I can confirm that without this hack, everything looks good. Glad that this has finally been fixed and everything works fine now. Thanks :)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.