Oracle APEX Cookbook(Second Edition)
上QQ阅读APP看书,第一时间看更新

Embedding multimedia objects in your application>

Flash or Shockwave plug-ins or YouTube videos can add that sparkling touch to web pages. It is nice to know that it is possible to include these multimedia objects into APEX web pages. Actually, it is quite simple to implement. To demonstrate this, we will create a web page where a user can select a movie from a listbox and see the requested video.

Getting ready

Make sure you have access to the APP_VIDEO table and that the table contains some records to test.

How to do it...

  1. In the Application Builder, click on the Create Page button.
  2. Select Blank Page.
  3. Enter a page alias, for example, Videos and click on Next.
  4. Enter a name for the page, for example, Videos. In the Optional HTML Regions section, enter a name in the first text field, for example select video. Click on Next.
  5. Select No Tabs and click on Next.
  6. Click on Finish to confirm the settings.

The page has now been created together with an HTML region. Now we will create a listbox and a PL/SQL dynamic region:

  1. Click on the Edit icon.
  2. In the Items section, click on the Add icon.
  3. Select Select List.
  4. Enter a name for the select list, for example, PXX_VIDEO (XX is the page ID). Click on Next.
  5. Click again on Next (leave the options as they are).
  6. In the Page Action when Value Changed listbox, select Submit Page. Click on Next.
  7. Click on the Create dynamic list of values link. A pop-up window appears.
  8. Select the table/view owner and click on Next.
  9. In the Table or View text field, select APP_VIDEO. You can use the button next to the field to select a table or view. Click on Next.
  10. In the Display Column listbox, select Name. In the Return Value listbox, select url. Click on Next.
  11. Click on the Finish button.
  12. Click on Next.
  13. As a last step, click on the Create Item button.

Now we will create the PL/SQL dynamic region:

  1. In the Regions section, click on the Add icon.
  2. Select PL/SQL dynamic action.
  3. Enter a title for the region, for example, showvid.
  4. In the Region Template listbox, select No template.
  5. In the Parent Region listbox, select showvid (that is the region you just created). Click on Next.
  6. In the PL/SQL Source textarea, enter the following code:
    Sys.htp.p('<object width="640" height="385">');
    Sys.htp.p('<param name="movie" value="'||:PXX_VIDEO||'&hl=nl_NL&autoplay=1&fs=1&">');
    Sys.htp.p('</param>');
    Sys.htp.p('<param name="allowFullScreen" value="true">');
    Sys.htp.p('</param>');
    Sys.htp.p('<param name="allowscriptaccess" value="always">');
    Sys.htp.p('</param><embed src="'||:PXX_VIDEO||'&hl=nl_NL&autoplay=1&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385">');
    Sys.htp.p('</embed>');
    Sys.htp.p('</object>');
    [9672_03_14.txt]

    The PL/SQL code makes use of the htp.p function to output HTML and JavaScript to the screen. The result is the same code you should get when you want to embed a YouTube video:

    And the code looks like the following:

    <object width="640" height="385">
    <param name="movie" value="http://www.youtube.com/v/vwx814B9ed8&hl=nl_NL&fs=1&">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <embed src="http://www.youtube.com/v/vwx814B9ed8&hl=nl_NL&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385">
    </embed>
    </object>
    [9672_03_15.txt]

    First, the object tag tells APEX that a multimedia object such as an image or a movie will be included in the web page. The size of the object can be set with the width and height parameters. The next step in the code is the declaration of parameters. The allowscriptaccess parameter is necessary to enable the playing of a video on a different website than youtube.com. The embed tag is the actual inclusion of the multimedia object and src is the source of the object. In this case, the source is a URL to a movie at youtube.com. All this code will be showed as HTML using the htp.p function. To be able to use this code to show more videos, the listbox will be concatenated to the code.

  7. Well, the code has been entered, so click on the Create Region button.

The page is now ready. Run the page and see the result:

How it works...

This web page makes use of the embedded code which you can get from the YouTube website. We could have put this code into an HTML region; that works too. But in that case the URL of the YouTube video is hardcoded and cannot be changed by the user. With the use of the htp.p function you can make the code dynamic by concatenating the URL.

In the recipe, you could also see that the PL/SQL dynamic region has a parent HTML region. This is done to make it look as if all the objects are put together into one region, which looks better.

You can pass some more parameters to the player such as autoplay, genie menu (showing related videos after playing the video), enabling the fullscreen mode, or starting in High Definition (HD) whenever available.

There's more...

In this recipe we showed you how to embed a YouTube movie in your web page. It is also possible to embed other plug-ins such as a Flash plug-in, a Twitter widget, or a Weather widget. Websites like Twitter offer you the HTML code which you have to include in your web page, and similar to this recipe, you can use the htp.p function to send this HTML code to the screen.

You can also make a Region plug-in and give it some attributes such as movie, object width, and object height.

See also