How To: Inline Video Preview


At last year’s BlackBerry Developer Conference, I hosted a session where I discussed various ways of previewing video content, and now I’d like to share the sample application that allows you to view video within a list-like structure. The application demonstrates how the BlackBerry® video API allows you to add video just like a field within your UI manager. I have included the project and its source code as an example.

The sample takes video from your memory card and displays them as a list. On focus, it starts playing inline, and stops when the focus is away. There are three simple steps to achieving this:

1. Inline Player Creation
a. Create a player using the media manager API
b. Obtain the controls of the player
c. Get a reference of the video field

2. Set relative video view position
a. Set the display position of the field
b. Set height and width of the video field
c. Add this field to the parent container to handle layout.

3. Handle Control Events
a. onFocus schedule a timer to detect Hover state
b. Start the player on Hover
c. onUnFocus stop the player

The setup code is in the InlineVideoManager class:

public InlineVideoManager(Video video, int videoWidth, int videoHeight){
p = Manager.createPlayer (url);
VideoControl videoControl = (VideoControl) p.getControl("VideoControl");
Field field = (Field) videoControl.initDisplayMode(VideoControl.USE_GUI_PRIMITIVE,
field.setPadding(3, 3, 3,3);
videoControl.setDisplayLocation(3, 3);
videoControl.setDisplaySize(videoWidth, videoHeight);
super.add(field )

Handling focus change events:

public void onFocus(int direction)
if(_player != null && _player.getState() == Player.STARTED){
}catch(Throwable e){}

_videoDelayTimer = new Timer();
_videoDelayTimer.schedule(new VideoDelayTimer(),1000);

To get the entire package of source code, click here.

For the sake of simplicity, I have left the loading of videos from SD card synchronous, which means that if you have a lot of video, it may take some time. This just helps to demonstrate how you can embed video and play inline within your UI manager.

Have you had any experience with embedding video? Let us know in the comments.

Join the conversation

Show comments Hide comments
+ -
  • Stefan

    Thanks for the article guys! I like the way I can apply and transfer the same skills pretty much from Actionscript 3 to Java!

  • Sujayarun8

    hi.. can u explain how we can fetch the videos from a url and list like this?

  • Shiladitya

    You can stream over RTSP or HTTP. In any case you just have to change the datasource on how you provide the video. Instead of a file system its from a url thats all. The UI elements in this article can still be applied on the video player that you design.

    For streaming check out

  • Redwid

    Good snipped, but for BB 6.0 – showed black rectangles before and after playing.

  • Guest

    your source code doesnt compile. am i missing something?

  • cjp

    The first video in the list displays down about 75 pixels, then when I scroll down to obscure it and then back up it displays OK. Any thoughts?

    Also, what is a good way to pick size other than hard-coding 120×90? 118×80 looks better on the Bold, but doesn’t display on Storm2. 120×90 looks bad with splotches on either side on the Bold. Some function of display height?

blog comments powered by Disqus