如何在WebView中内联播放HTML5视频？

Question

我需要在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
        }
    }
}

- richcollins

---

你有没有看过这个帖子？ - Matt K

我的答案在这里：https://dev59.com/pGUo5IYBdhLWcg3wxB7T#16179544 - cprcrack

Answer 1

请参考这个示例，它是一个ICS应用程序，使用HTML5在webview中显示视频 - 希望它能解决您的问题。

如果您想要“伪造”自动播放（在webview中被阻止），则需要从页面onload事件触发.play()。如果您想要通过播放列表工作，则需要捕获并响应onended事件。

- Offbeatmammal