Flash or shockwave plugins or YouTube videos can add that sparkling touch to webpages. It is nice to know that it is possible to include these multimedia objects into APEX webpages. Actually, it is quite simple to implement. To demonstrate this, we will create a webpage where a user can select a movie from a select list and see the requested video.
Make sure you have access to the APP_VIDEOS table and that the table contains some records to test.
- In the application builder, click the Create page button.
- Select Blank page.
- Enter a page alias, that is, Videos. Click Next.
- Ènter a name for the page, that is, Videos. In the optional HTML regions section, enter a name in the first text field, that is, select video. Click Next.
- Select No tabs and click Next.
- Click Finish to confirm the settings.
The page has now been created, together with an HTML region. Now we will create a select list and a PL/SQL dynamic region.
- Click the Edit page icon.
- In the items section, click the Add icon.
- Select Select list.
- Enter a name for the select list. For example PXX_VIDEO (XX is the page ID). Click Next.
- Click Next (leave the options as they are).
- In the "page action when value changed" select list, select Submit page. Click Next.
- Click the Create dynamic list of values link. A pop-up window appears.
- Select the table/view owner and click Next.
- 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 Next.
- In the display column list box, select Name. In the return value list box, select URL. Click Next.
- Click the Finish button.
- Click Next.
- In the last step, click the Create item button.
Now we will create the PL/SQL dynamic region.
- In the regions section, click the Add icon.
- Select PL/SQL dynamic action.
- Enter a title for the region, that is, showvid.
- In the region template list box, select No template.
- In the parent region list box, select selectvideo (that is the region you just created). Click Next.
In the pl/sql source text area 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>'),
[1346_03_14.txt]
Explanation of the code:
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"> multimedia objectsembedding, in APEX application<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>
[1346_03_15.txt]
First, the object tag tells APEX that a multimedia object like an image or a movie will be included in the webpage. 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 playing a video on a different website than youtube.com. The embed tag is the actual inclusion of the multimedia object. 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 select list will be concatenated to the code.
Well, the code has been entered, so click the Create region button.
The page is now ready. Run the page and see the result.
This webpage 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), enable full screen mode, or start in High Definition (HD) whenever available.
In this recipe, we showed you how to embed a YouTube movie in your webpage. It is also possible to embed other plugins such as a Flash plugin, a Twitter widget, or a weather widget. Websites like Twitter offer you the HTML code which you have to include in your webpage 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 plugin and give it some attributes such as movie, object width, and object height.
For more information on the Youtube API, take a look at http://code.google.com/apis/youtube/player_parameters.html