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
- 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.
- Go to the iOS tab
- set "Supported Devices" to 'iPad'
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:
- In the standalone setting pane, go to 'Copy Files'
- Click 'Add File..." to browse to our video file
- 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", "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
- Select the iPad simulator from Development > Test Target
- Click on the Test button to test.
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"
As far as I can see, the script is identical to that shown on this page.
What is the problem?
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"
so the command is only called when running under iOS.
I hope that helps.
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?
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.
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?
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.
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
if "ioscontrol" is among the lines of iphoneControls() then
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.
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.
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.
sure, it is just a small snippet of code in the tutorial. Look for the following command and body:
// Delete the control
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".
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>?
there is a bug when playing videos on the simulator under iOS 6.0. This has been addressed in LiveCode 6.0.0.
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?
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.
Looking at the lines:
if "mobilecontrol" is among the lines of mobileControls() then
mobileControlCreate "player", "videoControl"
Should this be: if "videoControl" is among the lines of mobileControls() ...?
Thanks for bringing that error to our attention. I have updated the lesson.
Is there an android video controller. I'm using version 9.01 Business
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.
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?
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.
Thanks for bringing this to our attention.
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
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.
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"
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.
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.
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 :-)
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.
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.
Thanks Elanor for checking and raising the bug ticket :-)
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
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?
I should have mentioned that the problem refers to Android. No mouse/down/touch control works on the player.
Ok, if you are on Android (and use mobileControlCreate to create the player) then I think you can use the "movieTouched" message. For example:
if isPlaying then
mobileControlDo "myMobilePlayer", "pause"
put false into isPlaying
mobileControlSet "myMobilePlayer", "rect", tRect
mobileControlSet "myMobilePlayer", "rect", the rect of this card
mobileControlDo "myMobilePlayer", "play"
put true into isPlaying
Hope this helps.