HowTo: Embedding YouTube videos in an Android application

Official Content
This documentation is valid for:

Sometimes is more comfortable for users to display videos inside the application instead of launching another application to play the video.
To do so the Android generator uses the native YouTube Android Player API to display embedded YouTube videos in your application.

This article shows an example of how to use this feature and explains some facts about it.

Step 1: Getting the developer key

The application developer must obtain a developer key by registering the app.
This key is required to be able to use the YouTube control on Android.

Step 2: Create the Transaction object

Create a simple Transaction object with an Attribute of type Video as shown in the image.
In this example, we named the transaction as "Tx" (general purpose).

YouTubeEmbeddingTrn

Step 3: Create the panels of the application

Apply the Work With pattern for Smart Devices on the Tx transaction object.
Then, in the WWSD object, set its Main program property to True.

Step 4: Setting some properties

Now it's time to add the developer key.

For this, select the WWSD object declared as "main". Then, navigate through the tree properties to Main Object Properties > Android and look for Android YouTube API Key property to set its value with your key (obtained in step 1).
Schematically:

YouTubeEmbeddingProperty

Step 5: Modifying layouts

Make sure to set an appropriate height for the control.

Do this by using the Rows style property of the Section(General) level table in the WorkWithDevicesTx object.
As shown below we do this by choosing the percentage option.
Also, keep in mind that it's not possible to play videos if the YouTube control's height is larger than the actual layout area's height. This may happen if the layout has scroll and the video height is bigger than the actual layout height.

Important Note: As the Android YouTube Player API reference says:

"While videos are playing, this View has a minimum size of 200x110 dp. If you make the view any smaller, videos will automatically stop playing."

This means your video control needs to have that minimum size to be able to play YouTube videos. (In some cases that you have the video inside a table or grid, you need even more width for it to work correctly, for example 500dpx110dp).

Step 6: Adding Youtube videos

Finally, launch the Developer Menu and go to the Tx transaction link (it can be used in mobile browsers taking advantage of RWD - Responsive Web Design).
After that, you can add Youtube videos by setting the URL link in the UserVideo attribute and confirming the data.

i2016_10_07_17_07_143_png

Step 7: Done!

Run the WorkWithDevicesTx object and check out your application on an Android device.
You can see the embedded videos getting the detail of a record by tapping on a row.

Snapshots

Detail1_png

Notes

  • The device must have installed Youtube application.
  • This feature supports start time through two possibilities indicated in the URL:
    • For common and short links using "t" string query with start-time in Hours/Minutes/Seconds
      Example: http://www.youtube.com/watch?v=<video_ID>&t=<Hours>h<Minutes>m<Seconds>s
    • For embed links using "start" string query with the start-time in seconds
      Example: http://www.youtube.com/embed/<video_ID>?start=<Seconds>

Availability

From version GeneXus 15

See also




Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.