[TIMOB-25566] iOS: VideoPlayer showsControls false does if url is set after creation

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2018-05-23T09:11:47.000+0000
Affected Version/s	n/a
Fix Version/s	Release 7.3.0
Components	iOS
Labels	api, ios, showscontrols, videoplayer
Reporter	Emmanuel Francis
Assignee	Hans Knöchel
Created	2017-11-28T10:10:34.000+0000
Updated	2018-06-25T20:28:47.000+0000

Description

I have below code block to show videoplayer in full screen with showscontrol false. But this shows a pause control, please check the attached screenshot.

Attachments

File	Date	Size
Simulator Screen Shot - iPhone 6 - 2017-11-28 at 15.37.07.png	2017-11-28T10:09:58.000+0000	736862

Comments

Sharif AbuDarda 2017-11-28

Hello, I can verify the issue in SDK 6.3.0.GA. Video player clontrols still show despite setting "showsControls: false" in video player. Thanks.
Michael Gangolf 2017-12-21

Same with 7.0.0.GA. Because of that the "Click" event is not firing. And since mediaControlStyle:Titanium.Media.VIDEO_CONTROL_NONE got removed in 7 it is not possible to hide the controls in 7
Raef Akehurst 2018-01-12

In case anyone was going to try, it is still an issue with 7.0.2.v20180105084516. Sorry, I don't have the skills to fix this. I think it will be pretty important for many. As the documentation suggests, it can be used for splash screen videos I would think a lot of people do this. I am loading an explainer video and the play controls obscure the subtitles (for those with audio turned off). Watching this ticket with hope! :)
Raef Akehurst 2018-01-12
Joe Finnigan 2018-01-15

Any updates or ETA for this bug? This is a critical bug for us, we have an interactive event app going live early February that video playback is a massive part of, and we need to be able to hide the controls permanently. Can you escalate the priority of this bug with engineering please?

Hans Knöchel 2018-01-22

Works fine here:

   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   var player = Ti.Media.createVideoPlayer({
       url: 'http://techslides.com/demos/sample-videos/small.mp4',
       showsControls: false,
       autoplay: true,
       height: 200
   });
   
   win.add(player);
   win.open();

In addition, some comments here are about iOS and some Android, so not sure where this is actually belonging to as the initial ticket includes the ios label which the above test-case is tested with.

Joe Finnigan 2018-01-22

Definitely still showing controls on 7.0.1.GA on iOS for me using your test case above: https://vimeo.com/252241158/5892f123f6 Not tried on Android yet.
Joshua Quick 2018-01-24

Everyone, The VideoPlayer "showsControls" property is new and was added to Titanium in 7.0.0 and is currently only supported on iOS. http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.VideoPlayer-property-showsControls If you're building with a Titanium version older than 7.0.0... or if you're building for Android, then you need to use the VideoPlayer "mediaControlStyles" property instead. http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.VideoPlayer-property-mediaControlStyle We'll look into adding "showsControls" support for Android in the near future.
Joe Finnigan 2018-01-24

@Joshua Quick, what about my above test case / demo video that show it doesn't work on iOS on 7.0.1.GA?
Joshua Quick 2018-01-24

[~jfinnigan], perhaps we're missing "showsControls" support in Alloy/XML. I'll have someone double check.
Joe Finnigan 2018-01-24

Thanks, but that video is Hans exact test case running on 7.0.1.GA, not using Alloy/XML. Strange!

Joshua Quick 2018-01-24

Hmm... I just tried the following code on iOS 11.2 and iOS 10.3.1 (via Xcode's iPhone simulator) and the "showsControls" property is working correctly for me. I built it with Titainum 7.0.1.GA.

    var window = Ti.UI.createWindow({ fullscreen: true });
    var videoView = Ti.Media.createVideoPlayer(
    {
    	url: "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v",
    	autoplay: true,
    	showsControls: false,
    	scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
    	width: Ti.UI.FILL,
    	height: Ti.UI.FILL,
    });
    window.add(videoView);
    window.open();

[~jfinnigan], did you test on an actual iOS device or via the iOS simulator? Would you also mind showing us your "tiapp.xml" please? Thanks.

Joe Finnigan 2018-01-24

Real device, iPhone X running iOS 11.2.2. tiapp.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <ti:app xmlns:ti="http://ti.appcelerator.org">
        <id>com.crowdglow.soundstage</id>
        <name>SoundStage</name>
        <version>1.0.0</version>
        <publisher>SoundStage Inc.</publisher>
        <url>http://crowdglow.uk/<;/url>
        <description>undefined</description>
        <copyright>2017 by CrowdGlow</copyright>
        <icon>appicon.png</icon>
        <fullscreen>false</fullscreen>
        <navbar-hidden>false</navbar-hidden>
        <analytics>false</analytics>
        <guid>53b852fc-6620-46ea-9777-2e0c6050879b</guid>
        <property name="ti.ui.defaultunit" type="string">dp</property>
        <property name="ti.android.root.reappears.restart" type="bool">true</property>
        <!--<property name="run-on-main-thread" type="bool">false</property>-->
        <ios>
            <enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>
            <use-app-thinning>true</use-app-thinning>
            <plist>
                <dict>
                    <key>UISupportedInterfaceOrientations~iphone</key>
                    <array>
                      <string>UIInterfaceOrientationPortrait</string>
                    </array>
                    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
                    <string>
                       To allow the Clan MNI app to detect when your at a home game
                    </string>
                    <key>NSMicrophoneUsageDescription</key>
                    <string>Need microphone access for uploading videos</string>
                    <key>NSCameraUsageDescription</key>
                    <string>Need camera access for media</string>
                    <key>NSLocationUsageDescription</key>
                    <string>To allow the Clan MNI app to detect your at Braehead Arena</string>
                    <key>NSLocationWhenInUseUsageDescription</key>
                    <string>To allow the Clan MNI app to detect your at Braehead Arena</string>
                    <key>NSPhotoLibraryUsageDescription</key>
                    <string>Need Library access for media</string>
                    <key>NSBluetoothPeripheralUsageDescription</key>
                    <string>To allow you take part in the interactive light show</string>
                    <key>NSAppleMusicUsageDescription</key>
                    <string>To access music</string>
                </dict>
            </plist>
        </ios>
        <android xmlns:android="http://schemas.android.com/apk/res/android">
            <manifest android:versionCode="8" android:versionName="1.5" package="com.crowdglow.braeheadclan">
                <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23"/>
                <uses-permission android:name="android.permission.BLUETOOTH"/>
                <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
                <uses-permission android:name="android.permission.WRITE_SETTINGS"/>
                <uses-permission android:name="android.permission.LOCATION"/>
                <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
                <uses-permission android:name="android.permission.CAMERA"/>
                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
                <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
                <uses-permission
                    android:name="android.permission.FLASHLIGHT" android:permissionGroup="android.permission-group.HARDWARE_CONTROLS"/>
                <application android:theme="@style/Theme.NoActionBar"/>
            </manifest>
        </android>
        <mobileweb>
            <precache/>
            <splash>
                <enabled>true</enabled>
                <inline-css-images>true</inline-css-images>
            </splash>
            <theme>default</theme>
        </mobileweb>
        <modules>
            <module platform="iphone" version="0.9.2">org.beuckman.tibeacons</module>
            <module platform="android" version="1.2.8">com.logicallabs.bluetoothle</module>
            <module platform="iphone">ti.light</module>
            <module platform="android" version="0.3">ti.light</module>
            <module platform="iphone" version="1.0">gael.utilities</module>
            <module platform="android">bencoding.android.tools</module>
            <module>ti.ga</module>
            <module>com.apaladini.brightness</module>
            <module platform="iphone">ti.compression</module>
            <module platform="android" version="2.0.4">ti.compression</module>
        </modules>
        <deployment-targets>
            <target device="android">true</target>
            <target device="ipad">false</target>
            <target device="iphone">true</target>
            <target device="mobileweb">false</target>
        </deployment-targets>
        <sdk-version>7.0.1.GA</sdk-version>
        <plugins>
            <plugin version="1.6.2">ti.alloy</plugin>
        </plugins>
        <property name="appc-app-id" type="string">568d782b4d9bafb37cee1206</property>
    </ti:app>

Joshua Quick 2018-01-25

I just tested it via iPhone X (iOS 11.2) simulator and this feature works for me. I'll see about getting someone here to test it on a real iPhone X device.
Eric Wieber 2018-01-25

I ran both [~jquick]'s and [~hknoechel]'s above examples using the below environment and did not see any video player controls, even when tapping on the video: Real iPhone X with iOS 11.2.2 MacOS 10.13.3 Ti SDK 7.0.1.GA Appc NPM 4.2.11 Appc CLI 7.0.1 Xcode 9.2 (9C40b) I have been trying different settings and changing environment components, but have not been able to have the controls shown
Raef Akehurst 2018-01-25

*Re. Android compatibility.* Regarding this not being an issue on Android if you use mediaControlStyle. I note, the documentation might be causing some confusion here. If you access the documentation page with the link you provided (http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.VideoPlayer-property-mediaControlStyle) then you see the mediaControlStyle details. If you access it through the navigation the URL is http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.VideoPlayer and mediaControlStyle is not shown presumably because it has been removed. *Re. Replicating the issue.* I think I managed to replicate the issue consistently! Here is my index.xml: <Alloy> <Window class="container"> <VideoPlayer id="video1" top="0" ns="Ti.Media" sourceType="Ti.Media.VIDEO_SOURCE_TYPE_FILE" scalingMode= "Ti.Media.VIDEO_SCALING_ASPECT_FIT" backgroundColor="red" autoplay="false" width="200" height="200" showsControls="false" /> <VideoPlayer id="video2" top="210" ns="Ti.Media" url="/intro.mp4" sourceType="Ti.Media.VIDEO_SOURCE_TYPE_FILE" scalingMode= "Ti.Media.VIDEO_SCALING_ASPECT_FIT" backgroundColor="blue" autoplay="false" width="200" height="200" showsControls="false" /> </Window> </Alloy> Here is my index.js $.video1.url = "/intro.mp4"; $.video1.play(); $.video2.play(); $.index.open(); When I start the app, the top video shows the controls. The bottom one does not. It would seem that if you set the URL for the video it shows the play controls.

Joshua Quick 2018-01-25

Okay. I'm able to reproduce this issue on iOS now. This issue happens if you set the video "url" property after setting the "showsControls" property like this...

    var window = Ti.UI.createWindow({ fullscreen: true });
    var videoView = Ti.Media.createVideoPlayer(
    {
    	autoplay: true,
    	showsControls: false,
    	scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
    	width: Ti.UI.FILL,
    	height: Ti.UI.FILL,
    });
    videoView.url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v";
    window.add(videoView);
    window.open();

*Work-Around:* You can work-around this bug by setting the "showsControls" property to false (even if it was already set to false before) after setting the URL property like this...

    videoView.url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v";
    videoView.showsControls = false;

So, order matters. Anytime you set the "url" property, you'll need to set the "showsControls" property again because internally the native view's equivalent setting gets reset. (That's the bug we need to fix.)

Joe Finnigan 2018-01-30

Work around isn't working for me, still seeing the controls with this:

    var window = Ti.UI.createWindow({ fullscreen: true });
    var videoView = Ti.Media.createVideoPlayer(
    {
    	autoplay: true,
    	showsControls: false,
    	scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
    	width: Ti.UI.FILL,
    	height: Ti.UI.FILL,
    });
    videoView.url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v";
    videoView.showsControls = false;
    window.add(videoView);
    window.open();

Hans Knöchel 2018-02-09

Working on this now. May be pushed forwards to a 7.0.3 if we do one.
Hans Knöchel 2018-02-16

Ok, so it seems like Apple restricts the property usage here. Regarding [the docs](https://developer.apple.com/documentation/avkit/avplayerviewcontroller/1615824-showsplaybackcontrols?language=objc), the property cannot be changed after the video has been rendered the first time: Do not use this property to change the visibility of the playback controls while the player view controller is onscreen, because doing so creates or destroys UI elements. So we either need to destroy the player and recreate it once a URL is changed (not really ideal) or state it as a known native limitation. I need to play with it a bit more. Due to the very soon 7.1.0 release, I'll move it out to 7.2.0 for now, as there is also a workaround by simply setting the URL on creation or creating a new video player once the URL changes.

Hans Knöchel 2018-02-16

PR: https://github.com/appcelerator/titanium_mobile/pull/9852 Test-Case:

    
    var window = Ti.UI.createWindow({ fullscreen: true });
    var videoView = Ti.Media.createVideoPlayer(
    {
    	autoplay: true,
    	showsControls: false,
    	scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
    	width: Ti.UI.FILL,
    	height: Ti.UI.FILL,
    });
    videoView.url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v";
    window.add(videoView);
    window.open();

Caio Perdona 2018-03-27

Couldn't get it working copying the contents of TiMediaVideoPlayerProxy.m from the PR to my local SDK folder. Any other ideas to work this around without a SDK bump? In fact, my problem is a little different. I jus't can't remove the controls from video on iOS.
Hans Knöchel 2018-03-29

[~perdona] Whats your test-case? Does the above one from me works? The fix feels pretty save, so I am wondering if your test case may differ. [~jfinnigan] Can you also try it out please?

Caio Perdona 2018-03-29

@Hans

    var window = Ti.UI.createWindow();
    
    var videoView = Ti.Media.createVideoPlayer({
      url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
      height: "100%",
      autoplay: true,
      mediaControlStyle: Ti.Media.VIDEO_CONTROL_NONE,
      scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FILL,
      repeatMode: Ti.Media.VIDEO_REPEAT_MODE_ONE,
      showsControls: false
    });
    
    window.add(videoView);
    
    window.open();

When I set main thread to false, controls show up on video.

Hans Knöchel 2018-05-03

Thanks [~perdona], great feedback! I have updated the pull request to work on the legacy kroll thread as well.
Samir Mohammed 2018-06-25

*Closing ticket.* fix can be seen in SDK Version: 7.3.0.v20180618182516 *FR (Passed) Test Steps:*
Created an application with the code above

Ran the program

Video played without any controls
*Test Environment* APPC Studio: 5.0.0.201712081732 APPC CLI: 7.0.4 iphone 6s (10.2) Operating System Name: Mac OS High Sierra Operating System Version: 10.13 Node.js Version: 8.9.1 Xcode 9.2

JSON Source

[TIMOB-25566] iOS: VideoPlayer showsControls false does if url is set after creation

Description

Attachments

Comments

Created an application with the code above

Ran the program

Video played without any controls