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.