本文へスキップ

Created Saturday 08 August 2015

The sample project is here. You also need Kwik 3.5.5
http://kwiksher.com/tutorials/Video/Video.zip

page1 - native play video
page2 - media play video (full screen)
page3 - web view and go to url
page4 - when native play video ends, show other images like navigation panel, animatioin etc.

youtube streaming video can be played with page3 method.
Corona SDK needs to load a video file and plays it while progressive donwloading.

The sample project properties

Create navigation is checked and the navigation panel will be displayed when the video finished on page4


Page1 - native play video


Page2 - Media Play Video (full screen)


Page3 Web View


page4 -when native play video completes , let's show other images


Page1 - native play video

layer and replacements > Video

http://kwiksher.com/tutorials/Video/kwikplant.mp4 is set

If the video file is to be included in the app, set a path to the file. Kwik will copies it to build/ folder.

play, pause and rewind controls to each button

Page2 - media play video

External code is set to playBtn on page2.

In Add button window, code > External Code. the lua file is media_playvideo.lua

media_playvideo.lua

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 and the rocket icon, "to be cotintued" and the staticImage are under the videoFrame. When the video is finished, videoFrame is hidden and the other layers are shown.

Create rocket rotation animation

Rotation widget window. Set Starts: Wait request

staticImage Linear Animation. Just tranparent 0% to 100% and Wait request.

Create an Action

  • Show/Hide videoFrame
  • Play Animation rocket rotatioin
  • Play Animation staticImage from 0% to 100% alpha
  • Show/Hide Navigation

Finally Linear and Replacement to videFrame

local kwikplanet.mp4 is set and Action is set wit the action created above.

Build for iOS XCode simualtor because corona simuator does not play native video. It needs to be built for devices.

XCode iOS Simualator is selected

Xcode iOS Simulator plays the app

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/