我有一个加载 wordpress 博客的 android webview。一些博客文章包含 youtube 视频,我希望用户能够根据需要制作全屏。问题是 HTML5 全屏按钮在单击时什么都不做,而是冻结视图。有任何想法吗?
3 回答
This is something I've spent the last day or so tearing my hair out over. Based on various bits of code from around the web I've managed to get it working.
First, you need to create a custom WebChromeClient
class, which implements the onShowCustomView
and onHideCustomView
methods.
private class MyWebChromeClient extends WebChromeClient {
FrameLayout.LayoutParams LayoutParameters = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT);
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
// if a view already exists then immediately terminate the new one
if (mCustomView != null) {
callback.onCustomViewHidden();
return;
}
mContentView = (RelativeLayout) findViewById(R.id.activity_main);
mContentView.setVisibility(View.GONE);
mCustomViewContainer = new FrameLayout(MainActivity.this);
mCustomViewContainer.setLayoutParams(LayoutParameters);
mCustomViewContainer.setBackgroundResource(android.R.color.black);
view.setLayoutParams(LayoutParameters);
mCustomViewContainer.addView(view);
mCustomView = view;
mCustomViewCallback = callback;
mCustomViewContainer.setVisibility(View.VISIBLE);
setContentView(mCustomViewContainer);
}
@Override
public void onHideCustomView() {
if (mCustomView == null) {
return;
} else {
// Hide the custom view.
mCustomView.setVisibility(View.GONE);
// Remove the custom view from its container.
mCustomViewContainer.removeView(mCustomView);
mCustomView = null;
mCustomViewContainer.setVisibility(View.GONE);
mCustomViewCallback.onCustomViewHidden();
// Show the content view.
mContentView.setVisibility(View.VISIBLE);
setContentView(mContentView);
}
}
}
Basically, what is happening here is when the full screen button gets pressed, we're creating a new view to hold the video and hiding the main view. And then when full screen is closed, we do the opposite - get rid of the new view and display the original view.
You'll need to also add all those properties to your activity class:
private MyWebChromeClient mWebChromeClient = null;
private View mCustomView;
private RelativeLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
And you probably want to make it close the fullscreen video when the back button is pressed:
@Override
public void onBackPressed() {
if (mCustomViewContainer != null)
mWebChromeClient.onHideCustomView();
else if (myWebView.canGoBack())
myWebView.goBack();
else
super.onBackPressed();
}
Then it's just a matter of using your new class when you create your webview:
myWebView = (WebView) findViewById(R.id.webView1);
mWebChromeClient = new WMWebChromeClient();
myWebView.setWebChromeClient(mWebChromeClient);
This works for me on Android 4.x. Not sure about earlier versions as my app isn't targeting them.
I found these links particularly useful: WebView and HTML5 <video> and http://code.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/HTML5WebView.java
如果在应用程序中直接显示 YouTube 视频并不重要,您可以在包含视频信息 URL 时启动外部 YouTube 应用程序。
要捕获视频信息 URL,您需要使用 owerrideonLoadResource
方法:
new WebViewClient() {
@Override
public void onLoadResource(WebView view, String url) {
if (url.startsWith("http://www.youtube.com/get_video_info?")) {
try {
String path = url.replace("http://www.youtube.com/get_video_info?", "");
String[] parqamValuePairs = path.split("&");
String videoId = null;
for (String pair : parqamValuePairs) {
if (pair.startsWith("video_id")) {
videoId = pair.split("=")[1];
break;
}
}
if(videoId != null){
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.youtube.com"))
.setData(Uri.parse("http://www.youtube.com/watch?v=" + videoId)));
needRefresh = true;
return;
}
} catch (Exception ex) {
}
} else {
super.onLoadResource(view, url);
}
}
}
感谢@Mark Parnell 的回复,但他正在艰难地进行大量的 UI 更改,也许这种方式更干净、更容易理解:
单击全屏按钮时,chrome 客户端会为我们提供全屏视图,然后我们应该将其添加到我们的活动视图中:
在我们的活动中定义这个全局变量来保存全屏视图引用:
public class MyAmazingActivity extends AppCompatActivity {
private View fullscreenView;
//...
}
然后 web chrome 客户端将通知我们在onShowCustomView
和onHideCustomView
方法中显示和隐藏全屏视图:
WebChromeClient webChromeClient = new WebChromeClient() {
private ViewGroup rootView;
private WebChromeClient.CustomViewCallback customViewCallback;
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
//Destroy full screen view if already exists
if (fullscreenView != null) {
callback.onCustomViewHidden();
return;
}
//Layout params to fit fullscreen view in our activity
ViewGroup.LayoutParams layoutParams =
new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
//Catch root of current activity to add fullscreen view
rootView = (ViewGroup) WebViewBaseActivity.this.webView.getRootView();
//Store full screen view, we need it to destroy it out of scope
fullscreenView = view;
customViewCallback = callback;
rootView.addView(fullscreenView, layoutParams);
}
@Override
public void onHideCustomView() {
//Make sure fullscreen view exists
if (fullscreenView != null) {
//Remove fullscreen view from activity root view
rootView.removeView(fullscreenView);
fullscreenView = null;
//Tell browser we did remove fullscreen view
customViewCallback.onCustomViewHidden();
}
}
};
最后在按下时删除全屏视图(用户期望这种行为):
@Override
public void onBackPressed() {
if (fullscreenView != null) {
webChromeClient.onHideCustomView();
}
}