CODEWITHSUNDEEP
androidhtmlyoutube
Paul Ruiz
Paul Ruiz

Reputation: 2436

Issue embedding YouTube HTML5 in Android App

So I've searched around on SO a fair bit today and have made significant progress, but now I'm having an issue that I haven't seen pop up anywhere. I've embedded a YouTube video into an HTML file using an iframe as such:

<body>
    <div align="center">
    <iframe class="youtube-player" type="text/html" width="480" height="320"
        src="http://www.youtube.com/embed/9DNAyD4ll6E?html5=1" frameborder="0">
    </div>
</body>

and I'm displaying it in a WebView that I'm modifying in my activity like so:

    WebView welcomeWebView = (WebView) findViewById(R.id.welcomeVideo);
    welcomeWebView.setHorizontalScrollBarEnabled(false);
    welcomeWebView.setVerticalScrollBarEnabled(false);
    welcomeWebView.getSettings().setJavaScriptEnabled(true);
    welcomeWebView.loadUrl("file:///android_asset/welcome.html");

The issue I'm having is that the still image display and controls show up, but when I click on play I'm presented with a gray screen that has a film strip and play icon in it. Here's the screen shots for the before/after for hitting play

http://www.ptrprograms.com/youtubeapp.png
http://www.ptrprograms.com/youtubeapp2.png

If anyone has seen this before or can point me in the right direction for displaying a video, I'd really appreciate it. Thank you!

EDIT: I also know that I can just use an intent to open it in a YouTube app, but my client (a non-profit that I'm donating this app to) is pretty specific about wanting it embedded into a page where we can have a textview with more information below it.

Upvotes: 0

Views: 793

Answers (1)

Paul Ruiz
Paul Ruiz

Reputation: 2436

So I ditched the external asset for the webview and instead decided to load it in the activity itself, and it seems to work a lot better (it actually runs :))

WebView webView = (WebView) findViewById(R.id.welcomeVideo);
    String play= "<html><body><div align=\"center\"> <iframe class=\"youtube-player\" type=\"text/html\" width=\"480\" height=\"320\" src=\"http://www.youtube.com/embed/9DNAyD4ll6E?rel=0\" frameborder=\"0\"></div></body></html>";
    webView.setWebChromeClient(new WebChromeClient() {
    });
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadData(play, "text/html", "utf-8");
    webView.setBackgroundColor(0x00000000);

Upvotes: 1

Related Questions