ApEx: Implementing video on your ApEx page

Recently I had the need to play videos , stored in my database, in ApEx. Although this seemed like a difficult task, it’s pretty easy to accomplish.

What I needed was an embedded video player (like Windows Media Player) to play the video on my ApEx page in a specific region.

Let’s start:

1. Create a new ApEx page with an empty html region

2. Now let’s create some html code so we can display the windows Media Player in your web browser. Paste the next code in your html region source:
< object id=”MediaPlayer” width=320 height=286 classid=”CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95″ standby=”Loading Windows Media Player components…” type=”application/x-oleobject” codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112″&gt;
<param name=”filename” value=””>
<param name=”Showcontrols” value=”True”>
<param name=”autoStart” value=”True”>
<embed type=”application/x-mplayer2″ src=”” name=”MediaPlayer” width=320 height=240></embed>
</object>

Some explanation:
The parameter filename will need the location where our file is stored, since the videos are stored in the database we will need to create a function that would return the video.

The parameter Showcontrols will show us player controls like ‘Play, Pause and Stop’ when set to ‘True’.

The parameter autoStart will start the video automatically when set to ‘True’.

You might notice the embed type, this is needed to play your video in Mozilla family browsers, The object tag is used for IE.

Run your page and you will see an empty Media Player:

3. Now create a procedure that will download your file to your web browser.

This is procedure could look like this:

PROCEDURE download_file(p_file_id IN files.file_id%TYPE)
IS
CURSOR c_my_file IS
SELECT file_content,
mime_type,
dbms_lob.getlength(file_content) file_length,
file_name
FROM files cmp
WHERE file_id = p_file_id;

rec_my_file c_my_file%ROWTYPE;
BEGIN
OPEN c_my_file;
FETCH c_my_file INTO rec_my_file;
IF c_my_file%FOUND THEN
owa_util.mime_header(rec_my_file.mime_type, FALSE);
htp.p(‘Content-length: ‘ || rec_my_file.file_length);
htp.p(‘Content-Disposition: attachement; filename=”‘||rec_my_file.file_name||'”‘);
owa_util.http_header_close;
wpg_docload.download_file(rec_my_file.file_content);
END IF;
CLOSE c_my_file;
END download_file;

4. Grant your procedure an execute to public otherwise APEX_PUBLIC_USER will not be able to execute it later on.

5. Now that we have our procedure we can implement it into our media player, open the source of your html region:

Change the next things:
<param name=”filename” value=”#OWNER#.pck$files.download_file?p_file_id=41″>

<embed type=”application/x-mplayer2″ src=”#OWNER#.pck$files.download_file?p_file_id=21″ name=”MediaPlayer” width=320 height=240></embed>

Although I use 21 hard coded for demo purposes here, you could always use an item of course. Note that my procedure is located in the package pck$files.

6. Run you page and you will see a nice movie playing in your ApEx webpage.

If you are planning to use this then I suggest you write a procedure that would display the apex code for the windows media player also, this way it’s more maintainable.