Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nativescript videoplayer not showing on tns build (ios) #158

Open
hetd54 opened this issue Oct 28, 2019 · 9 comments
Open

Nativescript videoplayer not showing on tns build (ios) #158

hetd54 opened this issue Oct 28, 2019 · 9 comments

Comments

@hetd54
Copy link

hetd54 commented Oct 28, 2019

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
Copy link
Contributor

NathanaelA commented Oct 29, 2019 •
edited

@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
Copy link
Author

hetd54 commented Oct 29, 2019 via email

@NathanaelA
Copy link
Contributor

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
Copy link
Author

hetd54 commented Oct 30, 2019 via email

@hetd54
Copy link
Author

hetd54 commented Oct 30, 2019 via email

@NathanaelA
Copy link
Contributor

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
Copy link

mirkospagnol commented Nov 9, 2019 •
edited

I have the same problem also with exoplayer

@mirkospagnol
Copy link

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
Copy link
Author

hetd54 commented Nov 11, 2019

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@NathanaelA @mirkospagnol @hetd54