Back

addVideoView

JS Py
Hello World
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

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 }
}
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
        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       Run      

Example - Video view callbacks

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) }
}
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
        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       Run      

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()
Number: Fraction of the parent width. Values can be [0-1].
Number: Fraction of the parent height. Values can be [0-1].
Number: The playback position in seconds.
String: “The video source url. Supported video formats are `"mp4"”, “ "ogg"”, “ "webm"`”
String: “Comma separated options. Values can be one or a combination of the following: `autoplay`”, “ `loop`”, “ `controls`”, “ `muted`”, “ `fill` or `stretch`. If you pass "controls"”, “ you can optionally remove some controls such as "nodownload"”, “ "nofullscreen" and "noremoteplayback".”
String: “The image type. Values are "jpg"”, “ "png"”, “ "webp"”, “ "gif". Default is "jpg".”
String: “The returned data format. Can be "base64"”, “ "bytes"(regular array)”, “ "uint8array"(typed array) or "arraybuffer".”
Object: The layout where to add the video view.
Object: Basic information of the video such as duration and dimensions.
function()
function( time )
function( info )
function( pos )
function( volume )
vw.capture
Capture an image in the playback. This will return an image data which you can save or manipulate.
vw.completed
Returns a boolean whether the video playback is completed.
vw.duration
Returns the time duration of the video in seconds.
vw.enterFullscreen
Play video in fullscreen if supported.
vw.exitFullscreen
Exit fullscreen if video is playing fullscreen.
vw.load
Reloads the video source.
vw.loop
Sets or returns a boolean whether the video should start over again when completed.
vw.muted
Returns a boolean whether the video audio is muted.
vw.paused
Returns a boolean whether the video is paused.
vw.play
Play the video.
vw.played
Returns a boolean whether the video is currently playing.
vw.seeking
Returns a boolean whether the user is currently seeking in the video playback seekbar.
vw.seekTo
Sets the playback position.
vw.setOnComplete
Sets a callback handler when the video playback is completed.
vw.setOnError
Sets a callback function when an error occurs while the video source is being loaded.
vw.setOnPause
Sets a callback handler when the video is pause by the user or programmatically.
vw.setOnPlay
Sets a callback handler when the video is played by the user or programmatically.
vw.setOnProgress
Sets a callback handler to be be called while the video is playing. This is usefull when you have a custom progress bar where to constantly update the playback time.
vw.setOnReady
Sets a callback handler when the video has buffered enough to begin playing. Video might not completely loaded for this event to be fired.
vw.setOnSeek
Sets a callback handler when seeking event is completed.
vw.setOnSeeking
Sets a callback handler when seeking event is active. Called when the user touches or slides the seekbar track.
vw.setOnVolume
Sets a callback function when the volume of the video changes.
vw.speed
Sets or returns the playback speed.
vw.stop
Stop the playing video.
vw.url
Sets or returns the video source url.
vw.volume
Sets or returns the video volume. Values can be [0-1].