Professional Documents
Culture Documents
edu/ai2/videowall
(http://www.weibo.com/mitappinventor) (http://mp.weixin.qq.com
/s?__biz=MzAxODE1NTc1MQ==&mid=201968203&idx=1&
sn=01f8946b01a98b63e97e201a812dc844#rd)
The VideoWall app tutorial demonstrates how you can control the size of a video playing in an app by using the Video Player component's
Width, Height, and FullScreen features. The VideoWall uses media assets (videos stored in the app itself), but you can use the app to display
videos from the internet as well.
This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the
Blocks Editor to specify the app's behavior. If you are not familiar with the basics, try stepping through some of the basic tutorials
(http://appinventor.mit.edu/explore/ai2/tutorials.html) before continuing.
Getting Started
Connect to the App Inventor web site and start a new project. Name the new project VideoWall and set the screen's Orientation to Landscape.
Download the following video files* for use later on (right click and choose "Save Link As..."):
BigBuckBunny (bigbuckbunny.3gp)
NASA (nasa.3gp)
Sintel (sintel.3gp)
*Attributions for these videos are included at the end of this tutorial.
Introduction
The finished VideoWall app will display a wall of three videos that can be expanded to their true size and then shrunk back down again. The app
will also allow you to display the videos in fullscreen. This tutorial assumes you have followed earlier tutorials to learn how the following blocks
work:
Variables
Procedures
Button.Click blocks
Use the component designer to create the interface for the VideoWall. When completed, the designer should look similar to the snapshot below.
First, you need to upload the video files. Click on the Upload File... button and select a video file downloaded earlier. Repeat this step to add the
other two video files.
In the properties of Screen1, set the BackgroundColor to Black, the ScreenOrientation to Landscape, and the Title to VideoWall. Now create the
interface by dragging and dropping the components from the Palette to the Viewer.
HorizontalArrangement Layout HorizontalArrangement1 Holds all other components: makes the Set Width to Fill parent...
three vertical arrangements line up side
by side
VerticalArrangement Layout VerticalArrangement1 Holds the left-most VideoPlayer and Set Width to Fill parent...
controls (VideoPlayer1, ResizeButton1,
and FullScreenButton1)
VerticalArrangement Layout VerticalArrangement2 Holds the middle VideoPlayer and controls Set Width to Fill parent...
(VideoPlayer2, ResizeButton2, and
FullScreenButton2)
1 of 4 10/7/2016 8:06 AM
VideoWall for App Inventor 2 | Explore MIT App Inventor http://explore.appinventor.mit.edu/ai2/videowall
VerticalArrangement Layout VerticalArrangement3 Holds the right-most VideoPlayer and Set Width to Fill parent...
controls (VideoPlayer3, ResizeButton3,
and FullScreenButton3)
VideoPlayer Media VideoPlayer1 Displays the BigBuckBunny video Set Source to bigbuckbunny.3gp , set
Width to Fill parent... , and set Height
to 36 pixels
VideoPlayer Media VideoPlayer2 Displays the NASA video Set Source to nasa.3gp , set Width
to Fill parent... , and set Height to 36
pixels
VideoPlayer Media VideoPlayer3 Displays the Sintel video Set Source to sintel.3gp , set Width
to Fill parent... , and set Height to 36
pixels
Button User ResizeButton1 Resizes VideoPlayer1 Set Text to "Grow" and set Width to
Interface Fill parent...
Button User ResizeButton2 Resizes VideoPlayer2 Set Text to "Grow" and set Width to
Interface Fill parent...
Button User ResizeButton3 Resizes VideoPlayer3 Set Text to "Grow" and set Width to
Interface Fill parent...
Button User FullScreenButton1 Shows the VideoPlayer1 video in Set Text to "Show Full Screen" and
Interface fullscreen set Width to Fill parent...
Button User FullScreenButton2 Shows the VideoPlayer2 video in Set Text to "Show Full Screen" and
Interface fullscreen set Width to Fill parent...
Button User FullScreenButton3 Shows the VideoPlayer3 video in Set Text to "Show Full Screen" and
Interface fullscreen set Width to Fill parent...
The interface is complete, but the buttons don't resize the videos yet. Open the Blocks Editor to add the behavior to the buttons. First, you'll
define three variable blocks to keep track of the size of the VideoPlayers:
initialize global name to Variables Defines the vid1_zoomed variable (rename it)
initialize global name to Variables Defines the vid2_zoomed variable (rename it)
initialize global name to Variables Defines the vid3_zoomed variable (rename it)
The three variables should like this:
Create the resizeVideoPlayer Procedure block. There are three VideoPlayers in the app, but
you'll use one Procedure block to resize all three. To accomplish this simplicity, you will use the
Any Component blocks component Any VideoPlayer blocks. To find the Any VideoPlayer
drawer, scroll to the bottom of the block drawers on the left of your screen. Next to Any
Component, click on the + sign and scroll down further to find the Any VideoPlayer drawer.
Create the resizeVideoPlayer Procedure block using the following blocks:
Procedure Procedures Defines the resizeVideoPlayer procedure. Use the mutator ability of the procedure to add three
arguments: x, x2, x3. (Change the names of these arguments to VideoPlayer, zoomed, and button.)
if then Control Defines the block that chooses whether the VideoPlayer is shrunk or expanded. Use the mutator to
add in an else statement.
= block Logic Defines the equals block for testing if the zoomed block is true
" " (x2) Text Text to set button to. Make one text block text's Shrink and the other's Grow.
The resizeVideoPlayer block should look like the following:
The resizeVideoPlayer block will be explained later after you create the
blocks for responding to button clicks.
The blocks you will create respond to clicks on the ResizeButton buttons. To
build the three blocks, you will need the following blocks:
2 of 4 10/7/2016 8:06 AM
VideoWall for App Inventor 2 | Explore MIT App Inventor http://explore.appinventor.mit.edu/ai2/videowall
resizeVideoPlayer (x3) Procedures Starts the resizeVideoPlayer block for resizing a VideoPlayer
not (x3) Logic Defines the block for switching the various zoomed block values
set global vid1_zoomed Variables Sets the vid1_zoomed block to a different value
set global vid2_zoomed Variables Sets the vid2_zoomed block to a different value
set global vid3_zoomed Variables Sets the vid3_zoomed block to a different value
get global vid1_zoomed (x2) Variables Used to change the vid1_zoomed value.
get global vid2_zoomed (x2) Variables Used to change the vid2_zoomed value.
get global vid3_zoomed (x2) Variables Used to change the vid3_zoomed value.
Wa rn in g: You can set the VideoPlayer Width and Height to any positive number you want. The VideoPlayer will change its size
to match the values you set; but on some devices, the VideoPlayer does not change its size correctly. The behavior on such
devices is usually unpredictable.
Tes t th is beh a vior. Click on the Grow button below the BigBuckBunny video. The video's size should expand, and the text of
the button should change to "Shrink". Click on the Shrink button below the BigBuckBunny video. The video's size should shrink
back to its original size and the text should change back to "Grow".
You will now add the blocks for showing the videos in fullscreen mode. Use the following blocks:
Final Program
3 of 4 10/7/2016 8:06 AM
VideoWall for App Inventor 2 | Explore MIT App Inventor http://explore.appinventor.mit.edu/ai2/videowall
Variations
Expand the
resizeVideoPlayer procedure
to resize VideoPlayers by small increments to create an animation effect. You could use multiple Clocks to start the resizeVideoPlayer procedure
and animate multiple VideoPlayers at once.
If you distribute your app to others, make sure you respect any license requirements for the videos you use.
Below are the attributions to the video files included in this demo app. The creators of the source videos that these clips are from do not endorse
App Inventor.
bigbuckbunny.3gp A clip from the full length film (c) copyright 2008, Blender Foundation / http://www.bigbuckbunny.org
(http://www.bigbuckbunny.org)
nasa.3gp A formatted version of the Mars' Whirling Here is the original video.
Dust Devil clip.
sintel.3gp A clip from the full length film (c) copyright Blender Foundation | http://durian.blender.org
(http://durian.blender.org)
Scan the following barcode onto your phone to install and run the sample app.
If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App
Inventor, click Projects, choose Import project (.aia) from my computer..., and select the source code you just
downloaded.
MIT is grateful to V a nce Tu rn e wit sch ( http ://exp lore.app i nventor.m it.ed u/p eop l e/vance-
turnewitsch) for developing this tutorial.
Done with VideoWall? Return to the other App Inventor 2 tutorials h e re (http ://exp l ore.ap pi nventor.m i t.ed u/ai 2 /tutorials ) .
AI Classic
Resources
Forums
Troubleshooting
(http://creativecommons.org/licenses/by-sa/3.0/)
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License (http://creativecommons.org
/licenses/by-sa/3.0/)
Contact Us
4 of 4 10/7/2016 8:06 AM