Play Video In Application

This tutorial is based on two different parts. First, we will play a video in an Oracle APEX application by creating a PL/SQL Dynamic content region. Secondly, we will create an item-type plugin to show the same video on the same page.

Let's start the thrill. Open your application. Go to Shared Components. Click the static workspace file option (in yellow color below). Click this button (in green color) to upload a video file. Upload any small clip, but it should be only of type webm,mp4,ogv. Only these types are supported in the code below. I am uploading an mp4 file. 

The reference to the video clip is highlighted. Take note of this reference, we will be using it later in the tutorial, through which we can see the runtime view of the video clip.

Create a new page. Select the blank page option. Add a new region to this page with the following attributes. For type property first click on the show Legacy option (in yellow color). Then select the PL/SQL Dynamic Content Legacy option.

Copy and paste this code into the page designer. 

declare
   V_webm_video VARCHAR2(50) :=  '#WORKSPACE_IMAGES#INTRO.webm';
   V_mp4_video  VARCHAR2(50) :=  '#WORKSPACE_IMAGES#INTRO.mp4';
   V_ogg_video  VARCHAR2(50) :=  '#WORKSPACE_IMAGES#INTRO.ogv';
begin
   sys.htp.p('<video width="640" height="480" controls>');
   if V_webm_video is not null then
      sys.htp.p('<source src="'||V_webm_video||'" type="video/webm" />');
   end if;
   if V_mp4_video is not null then
      sys.htp.p('<source src="'||V_mp4_video||'" type="video/mp4" />');
   end if;
   if V_ogg_video is not null then
      sys.htp.p('<source src="'||V_ogg_video||'" type="video/ogg" />');
   end if;
   sys.htp.p('Your browser does not support the video tag.');
   sys.htp.p('</video>');
end;

In this code, the highlighted text is the name and file type I use in the tutorial. 

Click the save and run page button. Now play the video.

Let's create an item-type plugin to show the same video on the same page. Go to Shared Components. Click the plugins option. Click the Create button to create a new plugin. Set the following attributes for the plugin. In the internal name field, you have to use your own video name. Item type plugin is implemented using a procedure. 

This PL/SQL procedure creates a video plugin.

procedure render_video (
    p_item   in         apex_plugin.t_item,
    p_plugin in        apex_plugin.t_plugin,
    p_param  in      apex_plugin.t_item_render_param,
    p_result out      apex_plugin.t_item_render_result)
is
   V_webm_video  apex_application_page_items.attribute_01%type  :=
                                  p_item.attribute_01;
   V_mp4_video   apex_application_page_items.attribute_02%type  :=  
                                  p_item.attribute_02;
   V_ogg_video   apex_application_page_items.attribute_03%type  :=  
                                  p_item.attribute_03;
begin
   sys.htp.p('<video width="640" height="480" controls>');
   if V_webm_video is not null then
      sys.htp.p('<source src="'||V_webm_video||'" type="video/webm" />');
   end if;
   if V_mp4_video is not null then
      sys.htp.p('<source src="'||V_mp4_video||'" type="video/mp4" />');
   end if;
   if V_ogg_video is not null then
      sys.htp.p('<source src="'||V_ogg_video||'" type="video/ogg" />');
   end if;
   sys.htp.p('Your browser does not support the video tag.');
   sys.htp.p('</video>');
end;

Click the Callbacks section. Enter the name for the render procedure function name attribute which is the name of the PL/SQL procedure created in the previous step to render the plugin.

Click the custom attributes section. Click the add attribute button. In the current scenario, we are adding the following three attributes to support the video type. 

These are the three supported video types. Make sure your video type Falls in between these three types.

Now open your application page. Create a new region. Add a new page item to the region. Set the following attributes for the page item. Set the type property to the video plugin, under the settings option. Select the field according to your video type, and paste the reference we noted earlier in the video. You can find this reference in the shared components under the static workspace files option.

Save and run the page to see the video clip. This is our second region on the same page. let's play the same video via the plugin.

That's it for now. If you got stuck somewhere in this tutorial, you can click the link below.

For Visual Instructions Watch The Video