Office of Digital Humanities

DigHT 310
Video Playback on Mobile Devices

LiveCode provides easy access to the video playback features of both iOS and Android devices. The following video formats are supported.

iOS - Supports playback of the following video formats:

H.264, MPEG-4
with the .mov, .mp4, .m4v, and .3gp filename extensions

See https://developer.apple.com/library/ios/#DOCUMENTATION/Miscellaneous/Conceptual/iPhoneOSTechOverview/MediaLayer/MediaLayer.html for details.

Android - Supports playback of:

H.263, H.264 AVC, MPEG-4 SP, and VP8
with the file extensions .3gp, .mp4, .webm

See http://developer.android.com/guide/appendix/media-formats.html for details.

Playback Basics

LivCode provides two ways to play video on mobile devices—the play video command and the mobile native video player.

Method 1: The play video command

Playback with the play video command works on both Android and iOS is relatively simple. See the Android and iOS release notes, under the "Video playback support" section for full details.

Use a variant of the play command to play a video:

   play video path-to-file or video-url

Where:

• path-to-file is the location of the video file in the device's file system.

OR

• video-url is a fully-qualified web address to a video on a web server.

To stop use the familiar play stop command.

Message

When the movie is played without a controller (the default,) any touch on the screen will cause a movieTouched message to be sent. You can handle this message to perform actions when the user touches the movie player on the screen:

   on movieTouched
      play stop
   end movieTouched

Setting Properties

The setting of properties for the video playback must be done before issuing the play video command. When a play video command is issued, LiveCode creates a video player on the fly using property settings in a hidden template called the templatePlayer. You must set properties on the templatePlayer prior to playing the video to have those properties be in effect with the video begins; they cannot be changed after the video starts.

To show the standard video controller use the command:

   set the showController of the templatePlayer to true

To set the video to loop continuously:

   set the looping of the templatePlayer to true -- before playing

iOS only:

A section of a video can be played by setting the playSelection of the templatePlayer to true before executing the play video command. This will then use the startTime and the endTime properties of the templatePlayer to determine what section to play. The values of these properties will be interpreted as the number of milliseconds from the beginning of the video.

Pros and cons: While this method is simple and straightforward, it has drawbacks:

• Only full-screen playback;
• No control over location of player;
• No access to information about the video; e.g., duration, current time;
• No ability to play a pre-defined segment of the video;
• Limited to use of built-in controls.

Method 2: Using a native video player

This method overcomes all of the drawbacks of the play video method, but is slightly more difficult to set up. However, since we are simply instantiating a native control type, setup is identical to setting up other types of native controls. This is documented in the Android and iOS release notes in the section "Player control".

Here is how we might go about creating mobile native video player:

put specialFolderPath("engine") & "/video/myVideo.m4a" into tVidFile
mobileControlCreate "player", "myPlayer"
put the result into sPlayerID -- save the control id

mobileControlSet sPlayerID, "filename", tVidFile
mobileControlSet sPlayerID, "visible", true
mobileControlSet sPlayerID, "rect", "100,50,820,350"
mobileControlSet sPlayerID, "showController", true
mobileControlSet sPlayerID, "preserveAspect", true

Commands

Once the control is created you can issue commands to it with mobileControlDo. Let's say you have a Play button and a Pause button:

# script of play button
on mouseUp
  mobileControlDo "myPlayer", "play"
end mouseUp

# script of pause button
on mouseUp
  mobileControlDo "myPlayer", "pause"
end mouseUp  

Player Control – Messages Sent

While the control is active a number of messages are sent to the card, which you can write handlers for in order to script actions when certain events happen. For example, if you want something to happen when the video finishes playing, handle the playerFinished message:

on playerFinished
   # do things here
end playerFinished

The example stack "mobilevideo.livecode", in the InClass > VideoPlayback folder on the server, shows working examples of video playback in a mobile app.