addVideoView

Content:
- Properties
- Methods

Adds a video view into your app layout.

vw = ui.addVideoView( parent, url, options, width, height ) → ui object: VideoView

By default, the video will be resize relative to its dimensions. If you want the video to cover the entire width and height, pass "fill" in the options argument.

Here are the setter and getter properties for the VideoView component.

Here are the methods for the VideoView component.

Example - Simple video view click to expand contents

class Main extends App
{
onStart()
{
        //Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        //Create a video view and pass the video url
        let src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        this.vid = ui.addVideoView(this.main, src, "AutoPlay", 0.8, 0.8)

        //Create a horizontal layout where to add video controls
        this.lay = ui.addLayout(this.main, "Linear", "Horizontal,VCenter", 0.8, 0.15)
        this.lay.setChildMargins(0.01, 0, 0.01, 0)

        //Create the play button
        this.playBtn = ui.addButton(this.lay, "Play", "", 0.2)
        this.playBtn.setOnTouch( this.play )

        //Create the pause/stop button
        this.pauseBtn = ui.addButton(this.lay, "Pause", "", 0.2)
        this.pauseBtn.setOnTouch( this.pause )

        //Create the mute toggle button
        this.muteBtn = ui.addButton(this.lay, "Mute", "Toggle", 0.2)
        this.muteBtn.setOnTouch( this.toggleMute )
    }

    //Handle play button
    play() { this.vid.play() }

    //Handle pause/stop button
    pause() { this.vid.stop() }

    //Handle mute toggle button
    toggleMute( val ) { this.vid.muted = val }
}

Copy All

Example - Video view callbacks click to expand contents

class Main extends App
{
onStart()
{
        //Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        //Create a video view with default Controls and Fill options
        let src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        this.vid = ui.addVideoView(this.main, src, "Controls,Fill", 0.8, 0.8)

        //Add video event listeners
        this.vid.setOnComplete( this.onComplete )
        this.vid.setOnPlay( this.onPlay )
        this.vid.setOnPause( this.onPause )
        this.vid.setOnSeek( this.onSeek )
        this.vid.setOnSeeking( this.onSeeking )
        this.vid.setOnVolume( this.onVolume )
        this.vid.setOnProgress( this.onProgress )
    }

    //Handle on complete event
    onComplete() { ui.showPopup( "Video completed" ) }

    //Handle on play event
    onPlay() { ui.showPopup( "Video is playing" ) }

    //Handle on pause/stop event
    onPause() { ui.showPopup( "Video has been paused" ) }

    //Handle seek event completed
    onSeek( val ) { console.log("On seek : " + val) }

    //Handle on active seeking event
    onSeeking( val ) { console.log("Seeking : " + val) }

    //Handle volume change event
    onVolume( val ) { ui.showPopup( val ) }

    //Handle playing progress event
    onProgress( time ) { console.log("Playback time : " + time) }
}

Copy All

Properties

The following properties are available on the VideoView object:

completed → Boolean

duration → Number

loop → Boolean

muted → Boolean

paused → Boolean

played → Boolean

seeking → Boolean

speed → Number

url → String

volume → Number

Methods

The following methods are available on the VideoView object:

capture( type, format ) → Object

enterFullscreen()

exitFullscreen()

load()

play()

seekTo( time )

setOnComplete( cb )

setOnError( cb )

setOnPause( cb )

setOnPlay( cb )

setOnProgress( cb )

setOnReady( cb )

setOnSeek( cb )

setOnSeeking( cb )

setOnVolume( cb )

stop()

Example - Simple video view click to expand contents

Example - Video view callbacks click to expand contents

Properties

Methods

loading