Play youtube/vimeo video embedded in HTML in Android WebView

Question

Hey So I'm trying to play youtube/vimeo videos embedded in HTML inside of a webview.

The typlical HTML will look like this:

<p>Here's some text from a server</p>
<p>This text goes inside of a webview</p>
<p>Sometimes there are iframe's with vimeo videos embedded in the HTML text like this:</p>

<iframe src="//player.vimeo.com/video/12345?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<p>Sometimes there are iframe's with youtube videos embedded in the HTML text like this:</p>

<p><iframe width="640" height="360" src="//www.youtube.com/embed/-NwibJy9-Cg?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></p>

But no video plays, and no thumbnail for the video is shown either.

I've looked at many different StackOverflow posts on this subject but have not found any luck with them.

Here's my code to set up the webview:

public class ReaderFragment extends Fragment {

private TextView mTitleTextView, mDateTextView;
private WebView mContentWebView;
private StoryItem mStory;

@Override
public View onCreateView(LayoutInflater inflater,
                         final ViewGroup container, Bundle savedInstanceState) {

    View v = inflater.inflate(R.layout.fragment_reader, container, false);

    mTitleTextView = (TextView) v
            .findViewById(R.id.fragment_reader_story_title);
    mTitleTextView.setText(mStory.getTitle());

    mDateTextView = (TextView) v
            .findViewById(R.id.fragment_reader_story_date);
    mDateTextView.setText(mStory.getAuthor());

    mContentWebView = (WebView) v
            .findViewById(R.id.fragment_reader_story_content);

    mContentWebView.setWebChromeClient(new WebChromeClient());
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mContentWebView.setWebViewClient(new WebViewClient());
    mContentWebView.setBackgroundColor(0x00000000);
    mContentWebView.getSettings().setBuiltInZoomControls(true);
    mContentWebView.getSettings().setJavaScriptEnabled(true);
    mContentWebView.getSettings().setLoadWithOverviewMode(true);
    mContentWebView.getSettings().setUseWideViewPort(true);

    //I load the webview with the entire HTML content from the server, including text, and
    //sometime <iframe> videos, I'd like to successfully embed these videos!
    mContentWebView.loadDataWithBaseURL(null, mStory.getUnparsedContent(),
            "text/html; charset=utf-8", "UTF-8", null);

    return v;
}

How can I display these inline <iframe> videos within my WebView?

Answer 1

So after a couple of days tinkering with this I FINALLY found the solution to my problem!

If you want to play <iframe ../> videos within your WebView you NEED to load the data with a base URL! This baseURL should be the URL of where the video is embedded, or anything to help indicate where the video can be found.

DONT do this:

// You need to give a baseUrl (e.g. the corresponding url of the HTML String)
webview.loadDataWithBaseURL(null, htmlWithVideosString,
            "text/html; charset=utf-8", "UTF-8", null);

DO THIS INSTEAD:

    /*
     VERY important to supply a baseURL for playing the videos!
     Without a baseUrl the WebView has no idea where to look for the video.
     The baseUrl will typically just be the URL that corresponds to the 
     HTML String that you are using.
    */
    mContentWebView.loadDataWithBaseURL(baseUrlOfHtmlContent, htmlWithVideosString,
            "text/html; charset=utf-8", "UTF-8", null);

Good Luck!

Also remember to set up your WebView...Like so...

    mContentWebView.setWebChromeClient(new WebChromeClient());
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mContentWebView.setWebViewClient(new WebViewClient());
    mContentWebView.getSettings().setJavaScriptEnabled(true);

TIP: May need to turn "hardware acceleration” on in the Manifest for this to work.

Example Hardware Acceleration On:

<application
    android:name="com.example.app"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true">
<!-- hardwareAccelerated requires SDK 14 -->
...
</application>