(TODO)Video Introduction

Video

There are 4 patterns to play a video file. Altenative to those video APIs, you may use spritesheet or sequential png files for animation though they don’t contain audio

Video/Animation Playback Methods Comparison

MethodRemote URL SupportLocal File SupportFormatFeaturesUse Case
Native Play✅✅MP4, MOVMOV(iOS):Transparent background in iOSEmbedded videos with UI integration
Media Play✅✅MP4, MOVFull screen playback, system controlsSimple full-screen video playback
Web View✅✅Any browser-supported formatStreaming servicesYouTube or other streaming services
Plugin Movie❌✅OGV, OGGCustom filters can be appliedintegration with game objects
Spritesheet❌✅PNGuniform, imagesheettools availlable like texturepacker, Adobe Animate
PNG files❌✅Sequentiap PNG files
Plugin Extended Image❌✅WebPSVG/QOI are also supported in plugin_gfxe

Alternatives by PNG file

Layer Replacment

Adobe Animate can produce .wav files along exporting PNG sequential files

MethodFormatSample filesBenefitsLimitations
Spritesheets (Uniform)PNGsprites.png
sprites@2x.png
sprites@4x.png		Multiple resolution support
Efficient memory usage		Simple
Spritesheets (Adobe Animate)JSON Array + PNGSquirrel.json
Squirrel.png		Adobe Animate as authoring imagesAdobe Animate subscripton cost
Spritesheets (Texture Packer)LUA + PNGuma.lua
uma.png		Optimized texture layoutImage creation by other tools
Requires Texture Packer
Sequential PNG FilesPNG seriesmovieClip/001-035.pngEasy to create as many frames as in pngMany files to manage
Higher memory usage

PNG sequential examples in Video Replacement

Alternatives by WebP - plugin_gfxe

the plugin able to render qoi, svg and webp.

Sample Project

The sample project: videoBook is here, and it contains two video files and two spritehseet files, and one sequentail png files

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.

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

Go to URL

To open browser app on device, use Go o URL in button’s interactions.

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

Preview with iPhone or iPad

Page1

Page2

Page3

Page4

Page4 finished

  • TODO 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/

Solar2D Sample

Media

  • NewVideo

    BigBuckBunny_640x360.m4v

    video = native.newVideo( videoFrame.x, videoFrame.y, videoFrame.width, videoFrame.height )
    video:load( "https://coronalabs.com/video/bbb/BigBuckBunny_640x360.m4v", media.RemoteSource )
    video:addEventListener( "video", videoListener )

  • VideoPlayer

    BigBuckBunny_640x360.m4v

      media.playVideo( "https://coronalabs.com/video/bbb/BigBuckBunny_640x360.m4v", media.RemoteSource, true )

Animation

  • HorseAnimation

    uma.png, uma.lua

    local umaSheet = graphics.newImageSheet( "uma.png", options )
local spriteOptions = { name="uma", start=1, count=8, time=1000 }
local spriteInstance = display.newSprite( sceneContainer, umaSheet, spriteOptions )

  • SpriteTiles

    sprites.png sprites@2x.png sprites@4x.png

    -- Create player sprite sheet
local sheetOptions = {
  width = 50,
  height = 50,
  numFrames = 64,
  sheetContentWidth = 800,
  sheetContentHeight = 200
}
local characterSheet = graphics.newImageSheet( "sprites.png", sheetOptions )

-- Create display group for sprites
local group = display.newGroup()
mainGroup:insert( group )

-- Calculate how many total rows and columns will fill screen
local tilesPerRow = math.ceil( display.actualContentWidth / 60 )
local totalRows = math.ceil( (display.actualContentHeight-30) / 60 )

-- Generate sprites
for i = 1,totalRows do
  for j = 1,tilesPerRow do

    local rnd = math.random( 1,16 )

    local sequenceData = {
      name = "character",
      start = (rnd * 4) - 3,
      count = 4,
      time = 600
    }
    local sprite = display.newSprite( group, characterSheet, sequenceData )
    sprite.x = j * 60
    sprite.y = i * 60
    sprite:play()
  end
end

–

Plugin movie

https://github.com/ANSH3LL/plugin_movie

av_sync_test.ogv
loop_test_nosound.ogv
loop_test_novideo.ogg
loop_test_sound.ogv sample_video.ogv
-- returns a texture object
movie.newMovieTexture{
    filename = string, -- the video's filename [required]
    baseDir = userdata, -- file's base directory, e.g: system.ResourceDirectory [optional]
    channel = number -- audio channel to use [optional]
}

-- returns an imagerect
movie.newMovieRect{
    x = number, -- [required]
    y = number, -- [required]

    width = number, -- [required]
    height = number, -- [required]

    filename = string, -- the video's filename [required]
    baseDir = userdata, -- file's base directory, e.g: system.ResourceDirectory [optional]
    channel = number, -- audio channel to use [optional]
    listener = function -- callback function that will receive events from this object [optional]
}

-- returns a group with 2 imagerect objects named one and two
-- channel1 and channel2 MUST be different (especially if the video contains audio)
movie.newMovieLoop{
    x = number, -- [required]
    y = number, -- [required]

    width = number, -- [required]
    height = number, -- [required]

    channel1 = number, -- audio channel used by imagerect one [required]
    channel2 = number, -- audio channel used by imagerect two [required]

    filename = string, -- the video's filename [required]
    baseDir = userdata, -- file's base directory, e.g: system.ResourceDirectory [optional]
    listener = function -- callback function that will receive events from this object [optional]
}