VideoPlayer, Basic: Playlist

[Scott Ferguson]

The VideoPlayer component allows playback of videos in an AI app.

In this exercise we will design an app that allows the user to select from a list of short video clips stored with the app. 

Create a new project named lrn_vpl_basic.

Screeen Designer:

Set Screen1.AlignHorizontal to Center.

 - this will center both the control to pick video clips and the VideoPlayer window horizontally on the screen

Set Screen1.Text to Video playlist (touch video player window to play).

Drag and drop a ListPicker component onto the Viewer.

Add the attached assets to the Screen Designer Media list: hui2010.mp4,oblivious.mp4,origami.mp4

Type the file names separated by commas (no spaces) just as shown above into the ElementsFromString textbox

 - these will appear in a control to be picked from

Set Selection to hui2010.mp4

Change the text property to pick a video

Drag and drop a VideoPlayer component to the Viewer.

Set it's Source property to hui2010.mp4

Blocks Editor:

Drag and drop a ListPicker1.AfterPicking event block to the BE canvas.

 - this block will execute it's contents after the user has picked a video clip to play

Drag and snap a [set VideoPlayer1.Source to] property block inside the VideoPlayer1.AfterPicking block.

Drag and snap a ListPicker1.Selection property block to it.

 - these blocks will tell the VideoPlayer which video clip to play (the one selected from the playlist)

Drag and snap a VideoPlayer1.Start procedure block next.

 - this block will load the video clip into the VideoPlayer 

 - note: for playback to begin, the user must touch the VideoPlayer screen, then touch the play button

END.

Now test your project in the emulator or connected device.

The output should be similar to this: 

Challenge: It would be nice to see 'pick a video' replaced by the file name of the playing video clip. (Hint: see [set ListPicker1.Text to])

[Manikanta Devarakonda]

Hello Scott Ferguson ,

                                App was good and working well,I need to know whether it if possible to make this video as live streaming video..which streams based on rtsp url to internet or 

                                is it possible to  upload this video to internet.Please help me.I'm looking to develop Live Streaming Application using app Inventor.

Thank you very much !!! 

[Scott Ferguson]

As far as I know you need access to the core mp4 or other supported video file. Sometimes those can be found in the video playlist XML file on the server.
See: http://developer.android.com/guide/appendix/media-formats.html
Also search the Programming with App Inventor Google group for streaming video.https://groups.google.com/forum/?fromgroups#!forum/programming-with-app-inventor
---sfs