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
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"
if the platform is "iphone" then
mobileControlSet "videoControl", "preserveAspect", true
end if
// 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
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
--