在android webview中全屏播放HTML5video

那么，我已经search了几天了，如何在Android WebView上以全屏模式显示HTML5video。

我设法在我的webview上播放HTML5video。 以全屏模式显示video时出现问题。

据我所知，android有两种处理<video>标签的方法：

1. 在android版本<= 2.3.3上 ，onShowCustomView方法被触发，我可以有VideoView实例，并在video完成时设置监听器，设置控制器等等。

2. 在ICS上（可能是3.0以上） ，它看起来像<video>以不同的方式处理。 当播放HTML5video时，onShowCustomView不会在普通模式下被调用 – 看起来好像在WebView内部有一个播放video的内部业务，并且显示了<video>标签中定义的所有控件 – I无法以任何方式访问它。 实际上，如果video是在正常模式下播放的，这是可以的，因为这些控件在那里并且正在工作。

这导致了我的一个大问题：当以全屏模式显示video时，onShowCustomView被调用 – 但在ICS上，“view”参数不是VideoView的一个实例。

我设法发现实例是VideoSurfaceView，它是HTML5VideoFullScreen类的私有内部类。 我们能够进入这个内部阶层的唯一途径就是通过反思。

在查看这个类的GrepCode后，我了解到，与VideoView不同的是，HTML5VideoFullScreen $ VideoSurfaceView不包含MediaPlayer实例，我可以监听其事件或访问其控件。 我能做的唯一事情就是把这个VideoSurfaceView照原样放在一个全屏幕布局中，而不用控制它。

底线 – 当全屏显示video时，我不知道video何时结束，其控制不显示 – 这是非常可悲的。 我无法得到closures全屏幕的触发器。

我尝试了几个不成功的解决方法：

1. 反思：我尝试从内部类VideoSurfaceView到达包含MediaPlayer成员的HTML5VideoFullScreen实例。 我没有设法得到它，我不知道这是可能的（ViewSurfaceView不拥有它的所有者的实例）。

2. 通过Javascript注册video事件（例如onended），并通过JavascriptInterface处理我在JAVA中需要的东西：我发现这个解决scheme不可靠，因为在这样做的时候，我遇到了另外一个问题：<video>标签可以嵌套在一个。 iframe源不是我的，我不能得到它的内容（getElementById或getElementsByTagName [i]是空值） – 这意味着，我无法到达iframe中的<video>元素。

我仍然在寻找一个解决scheme，关于这个问题写得很less。 有没有人设法解决它？ 帮助将不胜感激！

VideoView类： 这里 （有MediaPlayer）

HTML5VideoFullScreen $ VideoSurfaceView类： 这里 （没有MediaPlayer）

Answer 1

编辑2014/10：受欢迎的需求我维护和移动到GitHub。 请检查最后一个版本的cprcrack / VideoEnabledWebView 。 将保留此答案仅供参考。

编辑2014/01：改进的示例用法，包括nonVideoLayout，videoLayout和videoLoading视图，为那些请求更多示例代码的用户提供更好的代码覆盖。

编辑2013/12：与索尼Xperia设备兼容性相关的一些错误修复，但实际上影响所有设备。

编辑2013/11：在Android 4.4 KitKat（API级别19）发布新的Chromium webview之后，我不得不再次努力工作。 做了几个改进。 你应该更新到这个新版本。 我在WTFPL下释放这个源代码。 捐款被接受 （find捐赠链接在底部）。

编辑2013/04：经过1周的努力，我终于实现了我所需要的一切。 我认为这两个我创build的generics类可以解决你所有的问题。

VideoEnabledWebChromeClient可以单独使用，如果您不需要VideoEnabledWebView添加的function。 但VideoEnabledWebView必须始终依赖于VideoEnabledWebChromeClient 。 请仔细阅读这两个class级的所有意见。

VideoEnabledWebChromeClient类

 import android.media.MediaPlayer; import android.media.MediaPlayer.OnCompletionListener; import android.media.MediaPlayer.OnErrorListener; import android.media.MediaPlayer.OnPreparedListener; import android.view.SurfaceView; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.webkit.WebChromeClient; import android.widget.FrameLayout; /** * This class serves as a WebChromeClient to be set to a WebView, allowing it to play video. * Video will play differently depending on target API level (in-line, fullscreen, or both). * * It has been tested with the following video classes: * - android.widget.VideoView (typically API level <11) * - android.webkit.HTML5VideoFullScreen$VideoSurfaceView/VideoTextureView (typically API level 11-18) * - com.android.org.chromium.content.browser.ContentVideoView$VideoSurfaceView (typically API level 19+) * * Important notes: * - For API level 11+, android:hardwareAccelerated="true" must be set in the application manifest. * - The invoking activity must call VideoEnabledWebChromeClient's onBackPressed() inside of its own onBackPressed(). * - Tested in Android API levels 8-19. Only tested on http://m.youtube.com. * * @author Cristian Perez (http://cpr.name) * */ public class VideoEnabledWebChromeClient extends WebChromeClient implements OnPreparedListener, OnCompletionListener, OnErrorListener { public interface ToggledFullscreenCallback { public void toggledFullscreen(boolean fullscreen); } private View activityNonVideoView; private ViewGroup activityVideoView; private View loadingView; private VideoEnabledWebView webView; private boolean isVideoFullscreen; // Indicates if the video is being displayed using a custom view (typically full-screen) private FrameLayout videoViewContainer; private CustomViewCallback videoViewCallback; private ToggledFullscreenCallback toggledFullscreenCallback; /** * Never use this constructor alone. * This constructor allows this class to be defined as an inline inner class in which the user can override methods */ @SuppressWarnings("unused") public VideoEnabledWebChromeClient() { } /** * Builds a video enabled WebChromeClient. * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. */ @SuppressWarnings("unused") public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView) { this.activityNonVideoView = activityNonVideoView; this.activityVideoView = activityVideoView; this.loadingView = null; this.webView = null; this.isVideoFullscreen = false; } /** * Builds a video enabled WebChromeClient. * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. * @param loadingView A View to be shown while the video is loading (typically only used in API level <11). Must be already inflated and without a parent view. */ @SuppressWarnings("unused") public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView, View loadingView) { this.activityNonVideoView = activityNonVideoView; this.activityVideoView = activityVideoView; this.loadingView = loadingView; this.webView = null; this.isVideoFullscreen = false; } /** * Builds a video enabled WebChromeClient. * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. * @param loadingView A View to be shown while the video is loading (typically only used in API level <11). Must be already inflated and without a parent view. * @param webView The owner VideoEnabledWebView. Passing it will enable the VideoEnabledWebChromeClient to detect the HTML5 video ended event and exit full-screen. * Note: The web page must only contain one video tag in order for the HTML5 video ended event to work. This could be improved if needed (see Javascript code). */ public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView, View loadingView, VideoEnabledWebView webView) { this.activityNonVideoView = activityNonVideoView; this.activityVideoView = activityVideoView; this.loadingView = loadingView; this.webView = webView; this.isVideoFullscreen = false; } /** * Indicates if the video is being displayed using a custom view (typically full-screen) * @return true it the video is being displayed using a custom view (typically full-screen) */ public boolean isVideoFullscreen() { return isVideoFullscreen; } /** * Set a callback that will be fired when the video starts or finishes displaying using a custom view (typically full-screen) * @param callback A VideoEnabledWebChromeClient.ToggledFullscreenCallback callback */ public void setOnToggledFullscreen(ToggledFullscreenCallback callback) { this.toggledFullscreenCallback = callback; } @Override public void onShowCustomView(View view, CustomViewCallback callback) { if (view instanceof FrameLayout) { // A video wants to be shown FrameLayout frameLayout = (FrameLayout) view; View focusedChild = frameLayout.getFocusedChild(); // Save video related variables this.isVideoFullscreen = true; this.videoViewContainer = frameLayout; this.videoViewCallback = callback; // Hide the non-video view, add the video view, and show it activityNonVideoView.setVisibility(View.INVISIBLE); activityVideoView.addView(videoViewContainer, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); activityVideoView.setVisibility(View.VISIBLE); if (focusedChild instanceof android.widget.VideoView) { // android.widget.VideoView (typically API level <11) android.widget.VideoView videoView = (android.widget.VideoView) focusedChild; // Handle all the required events videoView.setOnPreparedListener(this); videoView.setOnCompletionListener(this); videoView.setOnErrorListener(this); } else { // Other classes, including: // - android.webkit.HTML5VideoFullScreen$VideoSurfaceView, which inherits from android.view.SurfaceView (typically API level 11-18) // - android.webkit.HTML5VideoFullScreen$VideoTextureView, which inherits from android.view.TextureView (typically API level 11-18) // - com.android.org.chromium.content.browser.ContentVideoView$VideoSurfaceView, which inherits from android.view.SurfaceView (typically API level 19+) // Handle HTML5 video ended event only if the class is a SurfaceView // Test case: TextureView of Sony Xperia T API level 16 doesn't work fullscreen when loading the javascript below if (webView != null && webView.getSettings().getJavaScriptEnabled() && focusedChild instanceof SurfaceView) { // Run javascript code that detects the video end and notifies the Javascript interface String js = "javascript:"; js += "var _ytrp_html5_video_last;"; js += "var _ytrp_html5_video = document.getElementsByTagName('video')[0];"; js += "if (_ytrp_html5_video != undefined && _ytrp_html5_video != _ytrp_html5_video_last) {"; { js += "_ytrp_html5_video_last = _ytrp_html5_video;"; js += "function _ytrp_html5_video_ended() {"; { js += "_VideoEnabledWebView.notifyVideoEnd();"; // Must match Javascript interface name and method of VideoEnableWebView } js += "}"; js += "_ytrp_html5_video.addEventListener('ended', _ytrp_html5_video_ended);"; } js += "}"; webView.loadUrl(js); } } // Notify full-screen change if (toggledFullscreenCallback != null) { toggledFullscreenCallback.toggledFullscreen(true); } } } @Override @SuppressWarnings("deprecation") public void onShowCustomView(View view, int requestedOrientation, CustomViewCallback callback) // Available in API level 14+, deprecated in API level 18+ { onShowCustomView(view, callback); } @Override public void onHideCustomView() { // This method should be manually called on video end in all cases because it's not always called automatically. // This method must be manually called on back key press (from this class' onBackPressed() method). if (isVideoFullscreen) { // Hide the video view, remove it, and show the non-video view activityVideoView.setVisibility(View.INVISIBLE); activityVideoView.removeView(videoViewContainer); activityNonVideoView.setVisibility(View.VISIBLE); // Call back (only in API level <19, because in API level 19+ with chromium webview it crashes) if (videoViewCallback != null && !videoViewCallback.getClass().getName().contains(".chromium.")) { videoViewCallback.onCustomViewHidden(); } // Reset video related variables isVideoFullscreen = false; videoViewContainer = null; videoViewCallback = null; // Notify full-screen change if (toggledFullscreenCallback != null) { toggledFullscreenCallback.toggledFullscreen(false); } } } @Override public View getVideoLoadingProgressView() // Video will start loading { if (loadingView != null) { loadingView.setVisibility(View.VISIBLE); return loadingView; } else { return super.getVideoLoadingProgressView(); } } @Override public void onPrepared(MediaPlayer mp) // Video will start playing, only called in the case of android.widget.VideoView (typically API level <11) { if (loadingView != null) { loadingView.setVisibility(View.GONE); } } @Override public void onCompletion(MediaPlayer mp) // Video finished playing, only called in the case of android.widget.VideoView (typically API level <11) { onHideCustomView(); } @Override public boolean onError(MediaPlayer mp, int what, int extra) // Error while playing video, only called in the case of android.widget.VideoView (typically API level <11) { return false; // By returning false, onCompletion() will be called } /** * Notifies the class that the back key has been pressed by the user. * This must be called from the Activity's onBackPressed(), and if it returns false, the activity itself should handle it. Otherwise don't do anything. * @return Returns true if the event was handled, and false if was not (video view is not visible) */ public boolean onBackPressed() { if (isVideoFullscreen) { onHideCustomView(); return true; } else { return false; } } } 

VideoEnabledWebView类

 import android.annotation.SuppressLint; import android.content.Context; import android.os.Handler; import android.os.Looper; import android.util.AttributeSet; import android.webkit.WebChromeClient; import android.webkit.WebView; import java.util.Map; /** * This class serves as a WebView to be used in conjunction with a VideoEnabledWebChromeClient. * It makes possible: * - To detect the HTML5 video ended event so that the VideoEnabledWebChromeClient can exit full-screen. * * Important notes: * - Javascript is enabled by default and must not be disabled with getSettings().setJavaScriptEnabled(false). * - setWebChromeClient() must be called before any loadData(), loadDataWithBaseURL() or loadUrl() method. * * @author Cristian Perez (http://cpr.name) * */ public class VideoEnabledWebView extends WebView { public class JavascriptInterface { @android.webkit.JavascriptInterface public void notifyVideoEnd() // Must match Javascript interface method of VideoEnabledWebChromeClient { // This code is not executed in the UI thread, so we must force that to happen new Handler(Looper.getMainLooper()).post(new Runnable() { @Override public void run() { if (videoEnabledWebChromeClient != null) { videoEnabledWebChromeClient.onHideCustomView(); } } }); } } private VideoEnabledWebChromeClient videoEnabledWebChromeClient; private boolean addedJavascriptInterface; public VideoEnabledWebView(Context context) { super(context); addedJavascriptInterface = false; } @SuppressWarnings("unused") public VideoEnabledWebView(Context context, AttributeSet attrs) { super(context, attrs); addedJavascriptInterface = false; } @SuppressWarnings("unused") public VideoEnabledWebView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); addedJavascriptInterface = false; } /** * Indicates if the video is being displayed using a custom view (typically full-screen) * @return true it the video is being displayed using a custom view (typically full-screen) */ public boolean isVideoFullscreen() { return videoEnabledWebChromeClient != null && videoEnabledWebChromeClient.isVideoFullscreen(); } /** * Pass only a VideoEnabledWebChromeClient instance. */ @Override @SuppressLint("SetJavaScriptEnabled") public void setWebChromeClient(WebChromeClient client) { getSettings().setJavaScriptEnabled(true); if (client instanceof VideoEnabledWebChromeClient) { this.videoEnabledWebChromeClient = (VideoEnabledWebChromeClient) client; } super.setWebChromeClient(client); } @Override public void loadData(String data, String mimeType, String encoding) { addJavascriptInterface(); super.loadData(data, mimeType, encoding); } @Override public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl) { addJavascriptInterface(); super.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl); } @Override public void loadUrl(String url) { addJavascriptInterface(); super.loadUrl(url); } @Override public void loadUrl(String url, Map<String, String> additionalHttpHeaders) { addJavascriptInterface(); super.loadUrl(url, additionalHttpHeaders); } private void addJavascriptInterface() { if (!addedJavascriptInterface) { // Add javascript interface to be called when the video ends (must be done before page load) addJavascriptInterface(new JavascriptInterface(), "_VideoEnabledWebView"); // Must match Javascript interface name of VideoEnabledWebChromeClient addedJavascriptInterface = true; } } } 

用法示例：

在主要布局activity_main.xml中放入一个VideoEnabledWebView和其他使用的视图：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <!-- View that will be hidden when video goes fullscreen --> <RelativeLayout android:id="@+id/nonVideoLayout" android:layout_width="match_parent" android:layout_height="match_parent" > <your.package.VideoEnabledWebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> <!-- View where the video will be shown when video goes fullscreen --> <RelativeLayout android:id="@+id/videoLayout" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- View that will be shown while the fullscreen video loads (maybe include a spinner and a "Loading..." message) --> <View android:id="@+id/videoLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:visibility="invisible" /> </RelativeLayout> </RelativeLayout> 

Activity的onCreate（） ，我们在其中初始化它：

 private VideoEnabledWebView webView; private VideoEnabledWebChromeClient webChromeClient; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set layout setContentView(R.layout.activity_main); // Save the web view webView = (VideoEnabledWebView) findViewById(R.id.webView); // Initialize the VideoEnabledWebChromeClient and set event handlers View nonVideoLayout = findViewById(R.id.nonVideoLayout); // Your own view, read class comments ViewGroup videoLayout = (ViewGroup) findViewById(R.id.videoLayout); // Your own view, read class comments View loadingView = getLayoutInflater().inflate(R.layout.view_loading_video, null); // Your own view, read class comments webChromeClient = new VideoEnabledWebChromeClient(nonVideoLayout, videoLayout, loadingView, webView) // See all available constructors... { // Subscribe to standard events, such as onProgressChanged()... @Override public void onProgressChanged(WebView view, int progress) { // Your code... } }; webChromeClient.setOnToggledFullscreen(new VideoEnabledWebChromeClient.ToggledFullscreenCallback() { @Override public void toggledFullscreen(boolean fullscreen) { // Your code to handle the full-screen change, for example showing and hiding the title bar. Example: if (fullscreen) { WindowManager.LayoutParams attrs = getWindow().getAttributes(); attrs.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN; attrs.flags |= WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON; getWindow().setAttributes(attrs); if (android.os.Build.VERSION.SDK_INT >= 14) { getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE); } } else { WindowManager.LayoutParams attrs = getWindow().getAttributes(); attrs.flags &= ~WindowManager.LayoutParams.FLAG_FULLSCREEN; attrs.flags &= ~WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON; getWindow().setAttributes(attrs); if (android.os.Build.VERSION.SDK_INT >= 14) { getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE); } } } }); webView.setWebChromeClient(webChromeClient); // Navigate everywhere you want, this classes have only been tested on YouTube's mobile site webView.loadUrl("http://m.youtube.com"); } 

并且不要忘记调用onBackPressed（） ：

 @Override public void onBackPressed() { // Notify the VideoEnabledWebChromeClient, and handle it ourselves if it doesn't handle it if (!webChromeClient.onBackPressed()) { if (webView.canGoBack()) { webView.goBack(); } else { // Close app (presumably) super.onBackPressed(); } } } 

Answer 2

编辑：请看我的其他答案 ，因为你现在可能不需要这个。

正如你所说，在API级别11+ HTML5VideoFullScreen $ VideoSurfaceView被传递。 但是当你说“它没有MediaPlayer”时，我认为你是对的。

这是使用reflection从HTML5VideoFullScreen $ VideoSurfaceView实例到达MediaPlayer实例的方法：

 @SuppressWarnings("rawtypes") Class c1 = Class.forName("android.webkit.HTML5VideoFullScreen$VideoSurfaceView"); Field f1 = c1.getDeclaredField("this$0"); f1.setAccessible(true); @SuppressWarnings("rawtypes") Class c2 = f1.getType().getSuperclass(); Field f2 = c2.getDeclaredField("mPlayer"); f2.setAccessible(true); Object ___html5VideoViewInstance = f1.get(focusedChild); // Look at the code in my other answer to this same question to see whats focusedChild Object ___mpInstance = f2.get(___html5VideoViewInstance); // This is the MediaPlayer instance. 

所以，现在你可以像这样设置MediaPlayer实例的onCompletion监听器：

 OnCompletionListener ocl = new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { // Do stuff } }; Method m1 = f2.getType().getMethod("setOnCompletionListener", new Class[] { Class.forName("android.media.MediaPlayer$OnCompletionListener") }); m1.invoke(___mpInstance, ocl); 

代码不会失败，但是我不能完全确定这个onCompletion监听器是否真的被调用，或者是否对你的情况有用。 但以防万一有人想尝试。

Answer 3

非常感谢Cristian。

我做了一个小调整，以便自定义加载视图是可选的，如下所示：

  @Override public View getVideoLoadingProgressView() // Video will start loading, only called in the case of VideoView (typically API level 10-) { if (loadingView == null) { return super.getVideoLoadingProgressView(); } else { loadingView.setVisibility(View.VISIBLE); return loadingView; } } 

我还添加了一个新的构造函数，只需要两个参数。 无论如何，如果你不需要加载视图，只是一个小的简化。 再次感谢提供这个。

Answer 4

刚刚设置
mWebView.setWebChromeClient(new WebChromeClient());

和video播放通常不会需要任何自定义视图。

Answer 5

这很棒。 但是，如果您希望自己的网站链接在应用程序本身中打开，请将以下代码添加到ExampleActivity.java中：

 webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (Uri.parse(url).getHost().endsWith("yourwebsite.com")) { return false; } Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); view.getContext().startActivity(intent); return true; } }); 

Answer 6

Cprcrack的答案在API等级19及以下的情况下效果很好。 只是对cprcrack的onShowCustomView一个小补充将使它在API级别21+上工作

 if (Build.VERSION.SDK_INT >= 21) { videoViewContainer.setBackgroundColor(Color.BLACK); ((ViewGroup) webView.getParent()).addView(videoViewContainer); webView.scrollTo(0,0); // centers full screen view } else { activityNonVideoView.setVisibility(View.INVISIBLE); ViewGroup.LayoutParams vg = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); activityVideoView.addView(videoViewContainer,vg); activityVideoView.setVisibility(View.VISIBLE); } 

您还需要反映onHideCustomView的更改

Answer 7

看起来，在棒棒糖和起来（或者可能只是一个不同的WebView版本）调用cprcrack's onHideCustomView()方法不起作用。 如果从退出全屏button调用它，但是当您专门调用该方法时，它将只能退出全屏，但webView保持空白。 一个解决方法是简单地将这些代码行添加到onHideCustomView() ：

 String js = "javascript:"; js += "var _ytrp_html5_video = document.getElementsByTagName('video')[0];"; js += "_ytrp_html5_video.webkitExitFullscreen();"; webView.loadUrl(js); 

这将通知全屏退出的webView。