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.
 
         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论