Nativescript videoplayer not showing on tns build (ios)

[hetd54]

Environment

CLI: 6.1.2
Xcode: 11.1.0
tns-ios: 6.1.0

Describe the bug

When building for ios 13, videos do not show up in the view (but they are there, and they do play, because you can hear the sound of the video). You can get the videos to show up temporarily the following way:

"tns run ios"
When the app opens, and the video isn't displaying, change anything in the file (like on the xml page)
When the app updates and re-opens, the video will be there.

However, any time you close the app manually and reopen it, the video is no longer there (but it plays in the background again).

To Reproduce
build a plain typescript app
add nativescript-videoplayer plugin
add to your xml file:
<VideoPlayer:Video id="nativeVideoPlayer" controls="false" autoplay="true" height="300" src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
tns run ios
You will see that the video is not there, but you can hear it playing.
Change anything in the file (like on the xml page)
When the app updates and re-opens, the video will be there.
Close the app manually, and reopen
The video (again) is not there, but you can hear it playing.

[NathanaelA]

@hetd54 -
Is this an iOS 13 device?
Which device?
which version of iOS?
Are you missing a width="300" or a width value? iOS can be picky and frequently wants both a height and width...

[hetd54]

Yes this is an iOS 13 device (auto update was unfortunately on) iPad Air 3 Version 13.1

…

On Tue, Oct 29, 2019, 1:35 AM Nathanael Anderson ***@***.***> wrote: @hetd54 <https://github.com/hetd54> - Is this an iOS 13 device? Which device? which version of iOS? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#158?email_source=notifications&email_token=AIP5B2NJTOYRNIPUAPMSRN3QQ7DSTA5CNFSM4JF32ZH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECPJM7Q#issuecomment-547264126>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIP5B2N663IFHGKVXBJFCH3QQ7DSTANCNFSM4JF32ZHQ> .

[NathanaelA]

Did you try adding a width="300" to your code. Different iOS versions sometimes won't render things properly without a width...

I just tested natiescript-exoplayer (which basically uses the same code as this for the iOS side) on a ios 12.4 and ios 13.2 device and the video player worked on all local and remote url's I threw at it.

However, my app does use width & height on it.

Using NS 6.12

[hetd54]

Thank you so much for helping me with this issue. I tried your suggestion, and I get the same behavior as I described above (it works in debug mode when you make a change, but when you close and reopen or try to build, it does not work).

…

On Tue, Oct 29, 2019 at 12:46 PM Nathanael Anderson < ***@***.***> wrote: Did you try adding a width="300" to your code. Different iOS versions sometimes won't render things properly without a width... I just tested natiescript-exoplayer (which basically uses the same code as this for the iOS side) on a ios 12.4 and ios 13.2 device and the video player worked on all local and remote url's I threw at it. However, my app does use width & height on it. Using NS 6.12 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#158?email_source=notifications&email_token=AIP5B2O7CNF3HM2DDBO3X5LQRBSGXA5CNFSM4JF32ZH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECRHZHA#issuecomment-547519644>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIP5B2OQ6XYRMK5CJDCEJBTQRBSGXANCNFSM4JF32ZHQ> .

[hetd54]

As an update, I was able to install and run successfully on a device with ios 12.4.1 installed on it. Therefore, it seems like this only is an issue with ios 13. On Wed, Oct 30, 2019 at 4:01 PM Heather Tarr <[email protected]> wrote:

…

Thank you so much for helping me with this issue. I tried your suggestion, and I get the same behavior as I described above (it works in debug mode when you make a change, but when you close and reopen or try to build, it does not work). On Tue, Oct 29, 2019 at 12:46 PM Nathanael Anderson < ***@***.***> wrote: > Did you try adding a width="300" to your code. Different iOS versions > sometimes won't render things properly without a width... > > I just tested natiescript-exoplayer (which basically uses the same code > as this for the iOS side) on a ios 12.4 and ios 13.2 device and the video > player worked on all local and remote url's I threw at it. > > However, my app does use width & height on it. > > Using NS 6.12 > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#158?email_source=notifications&email_token=AIP5B2O7CNF3HM2DDBO3X5LQRBSGXA5CNFSM4JF32ZH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECRHZHA#issuecomment-547519644>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AIP5B2OQ6XYRMK5CJDCEJBTQRBSGXANCNFSM4JF32ZHQ> > . >

[NathanaelA]

Have you tried the Exoplayer; it does use a slightly different code base. We also very recently rewrote some of the setup functions to solve a black screen issue.

[mirkospagnol]

I have the same problem also with exoplayer

[mirkospagnol]

problem solved: it does not work if registerElement is put in main.ts, but it work if it is put in the page controller

[hetd54]

Hello @NathanaelA I did try Exoplayer and had the same issue.

I spent a LOT of time debugging and I think there were several issues. The problem is mainly with the way NativeScript Layouts-- they seem to work differently with ios 13? It may also be an issue with how I understand NativeScript Layouts -- but previously the way I did it worked fine prior to recently.

I had to stop nesting Layouts within other Layouts in order to get it to work!

Previously, my layout was this:

<Page class="page" loaded="pageLoaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:VideoPlayer="nativescript-videoplayer">

    <ActionBar title="IDS Tablet Study">
    <StackLayout orientation="horizontal" ios:horizontalAlignment="center"
            android:horizontalAlignment="left">
            <Label text="Brown Language and Thought Lab   " class="action-label"></Label>
            <Image src="~/website_browser-icon.png" class="action-image"></Image>
        </StackLayout>
    </ActionBar>
        <FlexboxLayout class="slide" justifyContent="center">
          <StackLayout orientation="vertical" horizontalAlignment="left" verticalAlignment="left">
            <StackLayout class="form" id="instructions" orientation="vertical"
                horizontalAlignment="center" verticalAlignment="center"
                visibility="visible">
                <!--Add your page content here-->
                <Label textWrap="true" textAlignment="center" textDecoration="underline"
                    text="Welcome to the IDS tablet study! Please enter the information below:"
                    class="h2 description-label" marginBottom="50" />

                <WrapLayout orientation="horizontal"
                    itemWidth="240" itemHeight="100" verticalAlignment="center" >
                    <Label text="Subject ID: " />
                    <TextField id="subjectID" textWrap="true" id="subjectID"
                        hint="hint: MMDDYYIN" color="#24afd6" text="{{ subjectID }}"
                        class="h2 description-label" textAlignment="center" />
                    <Label text="Birthday: " />
                    <DatePicker color="#24afd6" year="{{ currentYear }}"
                        month="{{ currentMonth }}" day="{{ currentDay}}"
                        minDate="1970-01-01" maxDate="2100-12-31" />

                    <Label text="Study Version: " />
                    <ListPicker color="#24afd6" id="version" items="{{ listPickerVersion }}"
                        selectedIndex="{{ indexVersion }}" selectedValue="{{ selectedVersion }}" />
                    <Label text="Familiarization:" />
                    <ListPicker color="#24afd6" id="famtype" items="{{ listPickerFam }}"
                        selectedIndex="{{ indexFam }}" selectedValue="{{ selectedFam }}" />
                    <Label text="List Number:" />
                    <ListPicker color="#24afd6" id="list" items="{{ listPickerList }}"
                        selectedIndex="{{ indexList }}" selectedValue="{{ selectedList }}" />

                </WrapLayout>
                <StackLayout orientation="vertical" width="250" margin="50">
                    <Button text="Start" class="btn btn-primary" tap="startWarmup" />
                    <Button text="Check Connectivity" tap="{{ checkNetwork }}"
                        class="btn btn-primary" />
                </StackLayout>
            </StackLayout>
            <StackLayout id="warmup" orientation="vertical"
                horizontalAlignment="center" verticalAlignment="center"
                visibility="collapse" opacity="0">
                <VideoPlayer:Video id="warmupVideo"
            controls="false" loop="false" autoplay="false"
            src="~/videos/ball-warmup/warmup-1.mp4"  stretch="aspectFill" tap="onTapWarmup" visibility="visible"/>
                <VideoPlayer:Video id="warmupTestVideo"
            controls="false" loop="false" autoplay="false" 
            src="~/videos/ball-warmup/test-1.mp4" stretch="aspectFill"  finished="warmupTest" visibility="collapse" />
            </StackLayout>
            <StackLayout id="fams" orientation="vertical" horizontalAlignment="center"
                verticalAlignment="center" visibility="collapse" opacity="0">
                <VideoPlayer:Video id="famVideo"
            controls="false" loop="false" autoplay="false"
            src="~/videos/ball-warmup/warmup-1.mp4" tap="onTapFam" finished="videoFinishedEvent"/>
            </StackLayout>
            <StackLayout id="test" orientation="vertical" horizontalAlignment="center"
                verticalAlignment="center" visibility="collapse">
                <VideoPlayer:Video id="testVideo"
            controls="false" loop="false" autoplay="false"
            src="~/videos/ball-warmup/warmup-1.mp4" />
            </StackLayout>
            <StackLayout id="data" orientation="vertical" horizontalAlignment="center"
                verticalAlignment="center" visibility="collapse" opacity="0">
                <StackLayout class="form">
                    <StackLayout class="input-field">
                        <Label class="label" text="Folder Name" textWrap="true" />
                        <TextField class="input input-border" text="IDS" />
                    </StackLayout>
                    <StackLayout class="input-field">
                        <Label class="label" text="File Name" textWrap="true" />
                        <TextField class="input input-border" text="{{ subjectID }}" />
                    </StackLayout>
                    <Button class="btn btn-primary btn-active" text="Create"
                        tap="onCreateFile" />
                        <Button class="btn btn-primary btn-active" text="Next Participant"
                        tap="onReset" />
                    <StackLayout rows="*, *" columns="*" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}">
                        <Label class="body p-15" row="0" text="{{ successMessage }}"
                            textWrap="true" />
                        <Label class="body p-15" row="1" text="{{ 'File content: ' + writtenContent }}"
                            textWrap="true" />

                    </StackLayout>
                    
                </StackLayout>
                
            </StackLayout>
        </FlexboxLayout>
</Page>

And now it works with this:

<Page class="page" loaded="pageLoaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:VideoPlayer="nativescript-videoplayer">

    <ActionBar title="IDS Tablet Study">
    <StackLayout orientation="horizontal" ios:horizontalAlignment="center"
            android:horizontalAlignment="left">
            <Label text="Brown Language and Thought Lab   " class="action-label"></Label>
            <Image src="~/website_browser-icon.png" class="action-image"></Image>
        </StackLayout>
    </ActionBar>
            <StackLayout >
                <!--Add your page content here-->
                    <WrapLayout id="instructions" orientation="horizontal"
                    itemWidth="240" itemHeight="120" verticalAlignment="center" marginTop="100" marginLeft="25">
                    <Label text="Subject ID: " />
                    <TextField id="subjectID" textWrap="true" id="subjectID"
                        hint="hint: MMDDYYIN" color="#24afd6" text="{{ subjectID }}"
                        class="h2 description-label" textAlignment="center" />
                    <Label text="Birthday: " />
                    <DatePicker color="#24afd6" year="{{ currentYear }}"
                        month="{{ currentMonth }}" day="{{ currentDay}}"
                        minDate="1970-01-01" maxDate="2100-12-31" />
                    <Label text="Study Version: " />
                    <ListPicker color="#24afd6" id="version" items="{{ listPickerVersion }}"
                        selectedIndex="{{ indexVersion }}" selectedValue="{{ selectedVersion }}" />
                    <Label text="Familiarization:" />
                    <ListPicker color="#24afd6" id="famtype" items="{{ listPickerFam }}"
                        selectedIndex="{{ indexFam }}" selectedValue="{{ selectedFam }}" />
                    <Label text="List Number:" />
                    <ListPicker color="#24afd6" id="list" items="{{ listPickerList }}"
                        selectedIndex="{{ indexList }}" selectedValue="{{ selectedList }}" />

                </WrapLayout>

                <StackLayout id="buttons" orientation="vertical" width="250" margin="50">
                    <Button text="Start" class="btn btn-primary" tap="startWarmup" />
                    <Button text="Check Connectivity" tap="{{ checkNetwork }}"
                        class="btn btn-primary" />
                </StackLayout>


                <VideoPlayer:Video id="warmupVideo" visibility="collapse" opacity="0"
            controls="false" loop="false" autoplay="false"
            src="~/videos/ball-warmup/warmup-1.mp4"  height="800" tap="onTapWarmup" />
               <VideoPlayer:Video id="warmupTestVideo"
            controls="false" loop="false" autoplay="false" 
            src="~/videos/ball-warmup/test-1.mp4" height="800" finished="warmupTest" visibility="collapse" />
            <VideoPlayer:Video id="famVideo"
            controls="false" loop="false" autoplay="false" height="800" visibility="collapse" opacity="0"
            src="~/videos/ball-warmup/warmup-1.mp4" tap="onTapFam" finished="videoFinishedEvent"/>
                <VideoPlayer:Video id="testVideo"
            controls="false" loop="false" autoplay="false" height="800" visibility="collapse" 
            src="~/videos/ball-warmup/warmup-1.mp4" />
            <Image src="~/thanks.jpg" id="thanks" height="800" visibility="collapse"></Image>

            </StackLayout>
           

</Page>