Video

Video

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.

• https://kwiksher.com/tutorials/Kwik4/Video.zip

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

Pages

• 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.

  

Control buttons

• 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

    

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

Page1

Page2

Page3

Page4

Page4 finished

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.

http://kwiksher.com/forums/topic/hide-video-in-android-device/