How can I play html5 video inline in a WebView?
I need to play an html5 video inline in a WebView. I found a technique that is supposed to work, but it only works sporadically (see end of question). When it doesn't work, onShowCustomView isn't called. Can anyone see a reason that this isn't working or suggest an alternative?
package com.richcollins.VideoView;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import android.app.Activity;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.FrameLayout;
import android.widget.VideoView;
public class WebViewActivity extends Activity
{
WebView webView;
FrameLayout frameLayout;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LayoutInflater inflator = getLayoutInflater();
View inflatedView = inflator.inflate(R.layout.webview, null);
if (!(inflatedView instanceof FrameLayout))
{
throw new RuntimeException("inflated view not FrameLayout");
}
else
{
frameLayout = (FrameLayout)inflatedView;
}
setContentView(frameLayout);
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.setWebChromeClient(new MyWebChromeClient());
InputStream inputStream = getResources().openRawResource(R.raw.index);
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
int readByte;
try
{
while((readByte = inputStream.read()) != -1)
{
outStream.write(readByte);
}
String html = outStream.toString("UTF8");
webView.loadDataWithBaseURL("http://localhost/index.html", html, "text/html", "utf-8", "http://localhost/index.html");
}
catch(Exception e)
{
throw new RuntimeException();
}
}
private class MyWebChromeClient extends WebChromeClient implements MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener, MediaPlayer.OnPreparedListener {
VideoView videoView;
WebChromeClient.CustomViewCallback customViewCallback;
public void onProgressChanged(WebView view, int newProgress)
{
if (newProgress == 100)
{
view.loadUrl("javascript:playVideo()");
}
}
public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
{
customViewCallback = callback;
if (view instanceof FrameLayout){
FrameLayout videoFrameLayout = (FrameLayout) view;
if (videoFrameLayout.getFocusedChild() instanceof VideoView){
videoView = (VideoView) videoFrameLayout.getFocusedChild();
// hide the video controls
videoView.setMediaController(null);
//remove videoView from MediaPlayer and ad it to the content view
videoFrameLayout.removeView(videoView);
frameLayout.addView(videoView, ViewGroup.LayoutParams.WRAP_CONTENT);
videoView.setOnCompletionListener(this);
videoView.setOnErrorListener(this);
videoView.setOnPreparedListener(this);
videoView.start();
}
}
}
public void onPrepared(MediaPlayer mp)
{
}
public void onCompletion(MediaPlayer mp)
{
// this is needed to release the MediaPlayer and its resources so it can
// be used again later
videoView.stopPlayback();
// now remove the video and tell the callback to hide the custom view
frameLayout.removeView(videoView);
customViewCallback.onCustomViewHidden();
finish();
}
public boolean on开发者_高级运维Error(MediaPlayer mp, int what, int extra)
{
return false; // we did not handle the error - onCompletion will be called
}
}
}
See this for an example of an ICS app that uses HTML5 within a webview to display a video - hopefully it will solve your issue.
if you want to "fake" autoplay (which is blocked in a webview) you will need to trigger the .play() from the page onload event. if you want to work through a playlist then you will need to trap and respond to the onended event.
精彩评论