LiveCode LessonsHow To - LiveCode Mobile Tasks LiveCode Mobile TasksHow do I play a video in part of the screen on mobile

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

This lesson shows you how to create an iOS 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
  • File > Standalone application settings
    1. Go to the iOS tab
    2. For the purposes of this example set "Supported Devices" to 'iPad'. This tutorial applies equally to iPhone and iPods

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
   mobileControlSet "videoControl", "filename", specialFolderPath("engine") & "/video.mp4"
   mobileControlSet "videoControl", "preserveAspect", true
   mobileControlSet "videoControl", "showController", true
   mobileControlSet "videoControl", "visible", true
   mobileControlSet "videoControl", "rect", "250,200,783,500"
   
   // 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

Click on the Test button to test.

16 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

Add your comment

E-Mail me when someone replies to this comment