How do I play a video in part of the screen on mobile

This lesson shows you how to create a native mobile video controller and load a video.

Setup your stack and simulation settings

Setup your stack and simulation settings
  • Create a new stack
  • Resize it to 1024 x 768
  • Select File > Standalone application settings. For the purposes of this example we will use the iPad simulator but the tutorial applies equally to iOS and Android devices.
    1. Go to the iOS tab
    2. set "Supported Devices" to 'iPad'

Setup your video file

Setup your video file

For this test we need a video. We've exported a portion of a LiveCode promo video at a low quality which is contained in the sample zip attached to this lesson. We need to include it in our build:

  1. In the standalone setting pane, go to 'Copy Files'
  2. Click 'Add File..." to browse to our video file
  3. It should appear in the list

We should now have a stack that is setup for simulation with our video file included. We can start coding.

Create our control in script

Open the card script and paste the following code. The green comments explain what we are doing.

on openCard
   // Check the control doesn't already exist. If so delete and recreate it
   if "videoControl" is among the lines of mobileControls() then
      controlDelete
   end if   
   mobileControlCreate "player", "videoControl"
   
   // Set the basic properties including visibility, rectangle and video file path
   put url ("binfile:" & specialFolderPath("resources") & "/video.mp4") into \
         url ("binfile:" & specialFolderPath("documents") & "/video.mp4")
   mobileControlSet "videoControl", "filename", specialFolderPath("documents") & "/video.mp4"
   mobileControlSet "videoControl", "showController", true
   mobileControlSet "videoControl", "visible", true
   mobileControlSet "videoControl", "rect", "250,200,783,500"

   // The preserveAspect setting is iOS only so remove this for Android
   mobileControlSet "videoControl", "preserveAspect", true
   
   // Start playing the video
   mobileControlDo "videoControl", "play"
end openCard

on closeCard
   // Delete the control when we leave the card
   controlDelete
end closeCard

on controlDelete
   // Delete the control
   mobileControlDelete "videoControl"
end controlDelete

Test in the simulator

Test in the simulator
  • Select the iPad simulator from Development > Test Target
  • Click on the Test button to test.

33 Comments

grovecat

When I fire up the stack from the zip file, I get the following error message:

Type Handler: can't find handler
Object card id 1002
Line iphoneControlCreate "player", "ioscontrol"
Hint iphoneControlCreate

As far as I can see, the script is identical to that shown on this page.

What is the problem?

Elanor Buchanan

Hi

This causes a script error because iphoneControlCreate is only supported on iOS, not the desktop. The script should run correctly on an iOS simulator or device.

To prevent the error you can check the platform eg

if the platform is "iPhone" then
iphoneControlCreate "player", "ioscontrol"
end if

so the command is only called when running under iOS.

I hope that helps.

Elanor

michael

hi.

thank you for this tuts,

thought I need some help.

I want the player to be in full screen upon opening the card.

what code should I add?

thank you.

Hanson Schmidt-Cornelius

Hi Michael,

have a look at the dictionary entry for "iphoneControlSet". Under the heading "Player Specific Properties" you will find all the properties that can be set or read.

You will want to set the property "fullscreen" to true.

Kind Regards,

Hanson

porter584

Is it possible to have more than one ios video player on the screen at one time, how would this be done,

Also, could you have an invisible 'play' button above the player that triggers the video, and then either remains active to replay the movie, or then disappear along with the player leaving the background?

Many thanks.

Hanson Schmidt-Cornelius

Hi Porter584,

the answer is yes to both questions, but playback may be impaired, depending on the processing power of the device.

You can create a number of players using "iphoneControlCreate". Then control these players with the relevant "iphoneControlSet", "iphoneControlDo" ... commands.

You can make a button invisible by either giving it the pattern of the background or you can set it to opaque and remove all of the border types.

Kind Regards,

Hanson

Charlie

Great tutorial, but a minor mistake in it caused me several hours of frustration. The lines:

if "ioscontrol" is among the lines of iphoneControls() then
controlDelete
end if

should be:

if "ioscontrol" is among the lines of iphoneControls() then
iphoneControlDelete "ioscontrol"
end if

I know it seems obvious, but as someone who is new to LiveCode and iOS development, I just assumed that the tutorial would be right, so I was looking everywhere in my program to find the problem except for the part I copied verbatim from the tutorial!

Anyway, no biggie, but it probably should be updated.

Hanson Schmidt-Cornelius

Hi Charlie,

yes you are right, the command to delete a control is as you describe. The code in this lesson is implemented in a modular structure with wrapper command calls that can be expanded with additional functionality, if required.

There is a command "controlDelete" that wraps "iphoneControlDelete "ioscontrol"".

In this short code example it is probably not necessary to use this kind of wrapper functionality, but I would like to keep it. Our discussion may be valuable to other developers.

Kind Regards,

Hanson

Charliew

Thanks, Hanson. I can see how that functionality would be useful. Where is the method for setting up such a structure described? I don't see it in this tutorial, but since I'm not familiar with the technique I don't know what I'm looking for.

Hanson Schmidt-Cornelius

Hi Charliew,

sure, it is just a small snippet of code in the tutorial. Look for the following command and body:

on controlDelete
// Delete the control
iphoneControlDelete "ioscontrol"
end controlDelete

The "on controlDelete" and "end controlDelete" wrap around the code that is to be executed. In this case the body of this command executes "iphoneControlDelete "ioscontrol"". So when you call the command "controlDelete" you are executing the body of "controlDelete".

Basically what happens in this example is that calling "controlDelete" invokes "iphoneControlDelete "ioscontrol"". So calling "controlDelete" or "iphoneControlDelete "ioscontrol"" should fundamentally do more or less the same thing. The only requirement is that you have to add a bit more code that tells LiveCode what to do when you call "controlDelete".

Kind Regards,

Hanson

Ian Stewart

Hello

I am running this code in Livecode 5.5.4 and with Simulator 6.0 which runs other things. It won't run on the simulator. I can see the app but when I click on it simply shows a livecode splash screen briefly and then I see the iPad home with the icon for the app once again. No video. Any ideas on what might be happening here>?

Regards
Ian

Hanson Schmidt-Cornelius

Hi Ian,

there is a bug when playing videos on the simulator under iOS 6.0. This has been addressed in LiveCode 6.0.0.

Kind Regards,

Hanson

Alan

Hello,

I am also running Livecode 5.5.4. and the simulator iOS 6.1
I purchased all the relevant add ons, only to find, that the one feature I need to test is faulty under 5.5.4.

When can I get LiveCode 6.0.0 for this to be addressed?

Hanson Schmidt-Cornelius

Hi Alan,

if you are sure that the issue has been resolved in 6.0.0, then the gm version is due to be released very soon.

If you would like to find out if a particular issue you are having has been reported or is being addressed, then you can access our bug database at quality.runrev.com.

The status should indicate to you if a bug fix is available in the latest release of LiveCode. You can also review the release notes that come out with LiveCode, in order to determine if a particular bug has been included in a release.

Kind Regards,

Hanson

Jim

Looking at the lines:

if "mobilecontrol" is among the lines of mobileControls() then
controlDelete
end if
mobileControlCreate "player", "videoControl"

Should this be: if "videoControl" is among the lines of mobileControls() ...?

Thanks,
Jim

Elanor Buchanan

Hi Jim,

Thanks for bringing that error to our attention. I have updated the lesson.

Kind regards

Elanor

Colin

Is there an android video controller. I'm using version 9.01 Business
Thanks.

Elanor Buchanan

Hi Colin,

Yes this lesson applies to iOS and Android, I'll update the lesson to reflect this.

The only player setting that is not available on Android is "preserveAspect", other than that you should not have to make any other changes to the code.

Kind regards

Elanor

Celeste Helling

This is working well, except right before the player plays the video, and then again when the player is deleted, there is a black screen flash. Is there anyway to prevent this?

Elanor Buchanan

Hi Celeste

I have tested this and can see the same issue, I see you have reported this as a bug so I have attached a sample stack to the bug report. When the Dev Team have investigated they will update the bug report.

https://quality.livecode.com/show_bug.cgi?id=21812

Thanks for bringing this to our attention.

Elanor

JC

Hello,
I try to create a webradio player.
Can I use this ?
Can set the filename to a url ?
What's happening when mobile go to sleep.?
I would like music continue

Thank you

Elanor Buchanan

Hi JC

Yes, you should be able to set the filename of the player to a remote URL.

There is a Background Audio option in the iOS Standalone Settings, it is experimental but you can try it and see if it gives you the behavior you want.

Kind regards

Elanor

JC

Hello Elanor,

Effectively, I can listen my radio with a mp3 link.
I also found info here : https://forums.livecode.com/viewtopic.php?t=29001

If I set visible to true, there is a black square on screen and the music doesn't stops.
If I set visible to false, screen turn off after a moment and the music stops.
If I turn off the screen, music stops.
If I change of appli, music stops.

I test my app on android 9.

Do you have more info about background audio parametre ? the syntax ? for android ?

Is it mobileControlSet "HLSplayer", "backgroundAudio", true ????

Here my code :

on mouseUp pButtonNumber
put "Creation" into field "cnx"
mobileControlCreate "player", "HLSplayer" --create a player HLSplayer
mobileControlSet "HLSplayer", "visible", false
mobileControlSet "HLSplayer", "showController", false
mobileControlSet "HLSplayer", "rect", "-5,5,4,3" --adjust these settings to suit your screen real-estate
mobileControlSet "HLSplayer", "fileName", "https://urlradio..." --stream the HLS files
put "Connecting" into field "cnx"
mobileControlDo "HLSplayer", "play"
put "Connected" into field "cnx"
end mouseUp

I tested with a browser objet with a given command to display a widget.
It runs well except when the screen turn off (sleeping mode), the music also stops.

Thank you for any help you can give me.

JC

Elanor Buchanan

Hi

If you are creating an Android app have a look at the Android Background Audio library, it should provide what you need.

If you search for "background audio" in the Dictionary you will find the API documentation.

I hope that helps.

Kind regards

Elanor

Roger Mepham

Hi,

Its seems that there is a bug with startTime on IOS, endTime works fine but startTime just crashes my IOS simulator with this code:

mobileControlSet "videoControl", "filename", specialFolderPath("engine") & "/PresentationInternetHB.mp4"
mobileControlSet "videoControl", "showController", true
mobileControlSet "videoControl", "visible", true
mobileControlSet "videoControl", "rect", the rectangle of graphic "Display"
mobileControlSet "videoControl", "startTime", 10000
mobileControlSet "videoControl", "endTime", 12000

Any help or suggestions welcomed :-)

Elanor Buchanan

Hi Roger,

This looks like a bug so I have reported it in the Quality Control Center, from there the Development Team will pick it up and investigate.

https://quality.livecode.com/show_bug.cgi?id=22994

You can add your email address to the CC list on the bug report if you would like to receive updates when the status of the bug is changed.

Kind regards

Elanor

Roger

Thanks Elanor for checking and raising the bug ticket :-)

trevix

Hello.
How can I give the user the possibility to close the video control, if it is playing at full screen and any created button is not visible? Thanks

Panos Merakos

Hello Trevix,

I think that if the video plays fullscreen, and the users taps on it, there is an option to exit fullscreen. Then you can handle the "playerLeaveFullscreen" message (iOS only) and close the video control. Does that work for your use case?

Kind regards,
Panos
--

trevix

I should have mentioned that the problem refers to Android. No mouse/down/touch control works on the player.

Panos Merakos

Hello Trevix,

Ok, if you are on Android (and use mobileControlCreate to create the player) then I think you can use the "movieTouched" message. For example:

on movieTouched
if isPlaying then
mobileControlDo "myMobilePlayer", "pause"
put false into isPlaying
mobileControlSet "myMobilePlayer", "rect", tRect
else
mobileControlSet "myMobilePlayer", "rect", the rect of this card
mobileControlDo "myMobilePlayer", "play"
put true into isPlaying
end if
end movieTouched

Hope this helps.
Kind regards,
Panos

Oliver Kalleinen

Hi Panos, the movieTouched message is very useful. It is in the dictionary, but I would never have found it without you mentioning it here. It would be great if the MovieTouch message would be mentioned in the dictionary in conjunction with the MobileControls. That's where I would expect at least a link to the dictionary entry. Are there still other "hidden" messages the Mobile Player can send? Thanks. Oliver

Panos Merakos

Hello Oliver,

Indeed, we should put a link to the dictionary entry of this message. Other messages the mobile player sends are:

- playerFinished
- playerStopped
- playerMovieChanged
- playerError
- playerProgressChanged
- playerEnterFullscreen / playerLeaveFullscreen

I *think* the last 2-3 are iOS-only.

Kind regards,
Panos
--

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.