如何在WebView中内联播放html5视频?

时间:2011-08-09 21:18:11

标签: android html5 video webview

我需要在WebView中内联播放html5视频。我找到了一种应该可以工作的技术,但它只能偶尔发挥作用(见问题末尾)。如果它不起作用,则不会调用onShowCustomView。任何人都可以看到这不起作用的原因或提出替代方案吗?

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 onError(MediaPlayer mp, int what, int extra)
        {
            return false; // we did not handle the error - onCompletion will be called
        }
    }
}

1 个答案:

答案 0 :(得分:1)

有关在网页视图中使用HTML5显示视频的ICS应用示例,请参阅this - 希望它能解决您的问题。

如果你想“伪造”自动播放(在webview中被屏蔽),你需要从页面onload事件触发.play()。如果你想通过一个播放列表工作,那么你需要陷阱并回应所发生的事件。