There are three patterns to play a video
- native play
- media play full screen
- web view
youtube streaming video can be played with web view(page3 method). Other two method, Solar2D needs to load a video file and plays it while progressively downloading the video file.
The sample project is here.
The sample project properties
Create navigation is checked and the navigation panel will be displayed when the video finished on page4
by pressing Configure button, you will see
Page1 - native play video
Page2 - Media Play Video (full screen)
Page 3 Web View
page4 -when native play video completes , let's show other images
Page1 - native play video
layer and replacements > Video for videoFrame. You can choose a video URL on the Internet or the local video file to be included in your app.
For the case of http://kwiksher.com/tutorials/Video/kwikplant.mp4
If the video file is to be included in the app, set a path to the file. Kwik will copies it to build4/ folder.
play, pause and rewind controls to each button
Page2 - media play video
External code is set to playBtn on page2. No layer relacment is used.
code > External Code.
Now set the following code - media_playvideo.lua
local onComplete = function( event ) print( "video session ended" ) end local showControls = true media.playVideo( "http://kwiksher.com/tutorials/Video/kwikplanet.mp4", media.RemoteSource, showControls, onComplete )
if you like to play the video included in assets/videos/ folder, please use this one
local onComplete = function( event ) print( "video session ended" ) end local showControls = true media.playVideo( "videos/kwikplanet.mp4", showControls, onComplete )
Page3 - Web View
Layer and Replacement to webFrame layer
In Web View Replacement Window, http://kwiksher.com/tutorials/Video/youtube.html is set. This html plays youtube video inline.
If you want to incude the html in the app, set the html file path. Kwik copies it and set it to build/ folder
Go to URL
To open browser app on device, use Go o URL in button's interactions.
Add Button > Web > Go to URL. https://www.youtube.com URL is set
Page4 Video Completion Action
when native play video ends, let's trigger an action which contains linear animations and show/hide navigation.
- VideoFrame layer is the top over the the rocket icon, “to be continued” and the staticImage. When the video is finished, the videoFrame is hidden and the other layers are shown.
Create rocket rotation animation
Rotation widget window.
Starts: Wait request
staticImage Linear Animation.
Just tranparent 0% to 100% and Wait request.
Create an Action
this action will be triggered when Video is finished
- Show/Hide videoFrame
- Play Animation rocket rotation
- Play Animation staticImage from 0% to 100% alpha
- Show/Hide Navigation
Video Replacement with Action
- local kwikplanet.mp4 is set and Action is set wit the action created above.
Build for device
Build for iOS XCode simulator because corona simulator does not play native video. It needs to be built for devices.
- XCode iOS Simulator is selected
- Xcode iOS Simulator plays the app
Preview with xCode iOS Simulator
P.S. Android has an issue about making native video transparent. See the forum topic below. Need to work around by resize the video frame or moving it off the screen instead of hide function.