Question

I have been looking everywhere and I cannot manage to find the solution. I am currently developing an app that handles some rss content. In the content the writer can add youtube links inside a tag.

Playing youtube videos in the webView is not optimal. What I want to achieve is to display a preview of the video with the play button and when the user clicks on it, not start the video in the webView but rather start an intent with the video URL to launch either the youtube app if available or any other app that handles the intent.

How to launch the intent is not the issue. The problem is:

1. Show the preview and of the video with the play button.
2. Launch an intent when the video is clicked.

As an example Google Reader app could be taken.

I have tried many settings and but I cannot manage to find the way to do it correctly.

Thanks in advance.

P.S: This could be an example of the content:

<p><a href="http://blogg.fotbollskanalen.se/gara/files/2013/02/Skärmavbild-2013-02-07-kl.-10.40.03.png"><img class="aligncenter size-large wp-image-1759" src="http://blogg.fotbollskanalen.se/gara/files/2013/02/Skärmavbild-2013-02-07-kl.-10.40.03-424x527.png" alt="" width="424" height="527" /></a></p> <p>Avslutningsvis en rätt kass reklamfilm med <strong>Puyols</strong> polare <strong>Cesc Fàbregas</strong>, som för övrigt gjorde Spaniens första mål i går.</p> <iframe width="424" height="250" src="http://www.youtube.com/embed/x353GSw70_c" frameborder="0" allowfullscreen></iframe> <p>* = Övriga sex 100-matchkillar är <strong>Casillas</strong>, <strong>Xavi</strong>, <strong>Zubizarreta</strong>, <strong>Xabi Alonso</strong>, <strong>Raúl</strong> och <strong>Fernando Torres.</strong></p> <p>UPPDATERING: Efter lite research kan jag nu meddela att bergsgeten är <a href="http://sv.wikipedia.org/wiki/Arabisk_oryx" target="_blank">en orix</a>. Tänk att man kan lära sig nya saker varje dag&#8230;</p>

Answer 1

I’ve had to do this for an application, and although a VideoView worked on later devices, older devices did not show the preview properly. I ended up creating a view that overlaid a play button on a background image, and linked to youtube on click. To get the images I used a youtube service that will allow you to request screenshots of hosted video’s.

To put this all together:-

1) Create your preview layout. E.g.

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp">

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitStart" />

    <ImageButton
        android:id="@+id/ButtonPlay"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@null"
        android:src="@drawable/play" />
</RelativeLayout>

Then I set the thumbnail using the following:-

public static final String VIDEO_IMAGE_URL = "http://img.youtube.com/vi/%1$s/0.jpg";
public static final String VIDEO_URL = "vnd.youtube://%1$s";
...
String imageUrl = String.format(VIDEO_IMAGE_URL, "youTubeVideoId"); 
.. 
ImageButton button = (ImageButton) row.findViewById(R.id.ButtonPlay);
String videoUrl = String.format(VIDEO_URL, mContext.getText(mRows[i].mVideoId));
button.setTag(Uri.parse(videoUrl));
button.setOnClickListener(mVideoClickListener);

All the click listener did was:-

startActivity(new Intent(Intent.ACTION_VIEW, (Uri) v.getTag()));

Hope that helps