webviewで表示しているhtml5のvideoタグ動画をフルスクリーン表示したい

y kiyo

unread,

Sep 26, 2014, 5:00:41 AM9/26/14

to android-g...@googlegroups.com

こんにちは。

4.0以上の端末でwebviewで表示しているhtml5のvideoタグ動画をフルスクリーン表示したいのですが、

どうもうまくいかないので力をお貸しして頂けませんでしょうか？

動画表示の時にIntentでACTION_VIEWの設定をすればいいのではないかと思い、

以下の様なコードを書いたのですが、WebView内で表示されるだけでフルスクリーン表示になりません。

videoタグのコントローラでフルスクリーンボタンを押下しても変化なしでした。

以下、ソースを貼ります。※AndroidAnnotations3.1を導入してます

・MainActivity.java

package com.example.webviewtest;

import org.androidannotations.annotations.AfterViews;

import org.androidannotations.annotations.EActivity;

import android.support.v7.app.ActionBarActivity;

import android.widget.LinearLayout;

@EActivity(R.layout.activity_main)

public class MainActivity extends ActionBarActivity {

MainFragment mainFrgm;

LinearLayout webViewLayout;

@AfterViews

void initViews() {

mainFrgm = new MainFragment_();

getSupportFragmentManager().beginTransaction()

.add(R.id.container, mainFrgm).commit();

　　　　　　　　　　// Webviewの表示先URL

mainFrgm.initWebView(this, "http://aaa.bbb.ccc/sample.html");

}

------------------------

・MainFragment.java

package com.example.webviewtest;

import org.androidannotations.annotations.AfterViews;

import org.androidannotations.annotations.EFragment;

import org.androidannotations.annotations.ViewById;

import android.app.Activity;

import android.content.Intent;

import android.graphics.Bitmap;

import android.net.Uri;

import android.support.v4.app.Fragment;

import android.webkit.HttpAuthHandler;

import android.webkit.WebChromeClient;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.LinearLayout;

@EFragment(R.layout.fragment_main)

public class MainFragment extends Fragment {

@ViewById

LinearLayout webViewLayout;

WebView webView;

Activity act;

String target_url;

@AfterViews

void initViews() {

webView = new WebView(act);

webViewLayout.addView(webView);

webView.setWebViewClient(new WebViewClient(){

@Override

public void onLoadResource(WebView view, String url) {

if (url.endsWith(".mp4")){

Intent in = new Intent (Intent.ACTION_VIEW , Uri.parse(url));

// in.setDataAndType(Uri.parse(url), "video/*");

startActivity(in);

return;

} else {

super.onLoadResource(view, url);

}

@Override

public boolean shouldOverrideUrlLoading(WebView webView, String url) {

if (url.endsWith(".mp4")){

Intent in = new Intent (Intent.ACTION_VIEW , Uri.parse(url));

// in.setDataAndType(Uri.parse(url), "video/*");

startActivity(in);

return true;

}

else {

return false;

}

});

webView.setWebChromeClient(new WebChromeClient());

webView.getSettings().setJavaScriptEnabled(true);

webView.getSettings().setAllowFileAccess(true);

webView.loadUrl(target_url);

}

void initWebView(Activity _act, String url)

{

target_url = url;

act = _act;

}

------

・activity_main（レイアウト）

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.webviewtest.MainActivity_"

tools:ignore="MergeRootFrame" >

</FrameLayout>

---------

・fragment_main （レイアウト　※最終的には上部にリスト下部にwebviewを表示したいのでlistをダミーで配置）

<LinearLayout 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"

android:orientation="vertical"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.example.webviewtest.MainActivity_$PlaceholderFragment_" >

<ListView

android:id="@+id/listView"

android:layout_width="match_parent"

android:layout_height="80sp" >

</ListView>

<LinearLayout

android:id="@+id/webViewLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" />

</LinearLayout>

---------

・AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.webviewtest"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="19" />

<uses-permission android:name="android.permission.INTERNET" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme"

android:hardwareAccelerated="true">

<activity

android:name="com.example.webviewtest.MainActivity_"

android:label="@string/app_name"

android:screenOrientation="portrait"

>

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

---------

・sample.html(webviewで表示しているhtml)

<!DOCTYPE html>

<html>

<head>

<title>動画再生テスト</title>

</head>

<body>

<p>HTML5のvideoタグによる動画再生</p>

<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>

</video>

</body>

</html>

---------

なにか情報を持っている方がいましたら教えていただけると助かります。

宜しくお願いします。

M.Yamakarasu

unread,

Sep 27, 2014, 12:27:19 AM9/27/14

to android-g...@googlegroups.com

からすと申します。

ちゃんと思い出せないので、
間違っていたら、申し訳ありません。

ちょっと気になったのは、

> WebView内で表示されるだけ
というご記載で、指定された表示レイアウト枠をはみ出して、

Webページが表示されたかなぁ？というところですが、、

WebViewが全画面指定されていれば、

html側に解像度あわせのおまじないの"viewpoint" のメタ要素書いて、

javascriptとcssでうまくサイズをあわせてあげて、

Android側にviewpointを有効にするための、
WebSettingsのsetUseWideViewPort()と、
画面サイズ(viewのレイアウト)にfitさせるための、
setLoadWithOverviewMode()あたりを追加で設定して
あげればうまく表示してくれるような気がしました。

httpストリーミングの動画コンテンツとして、他の動画アプリに
任せるという楽な手段もある気もします。

--

karasu

2014年9月26日 18:00 y kiyo <yuuichi...@gmail.com>:

--
このメールは Google グループのグループ「日本Androidの会」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには android-group-j...@googlegroups.com にメールを送信してください。
このグループに投稿するには android-g...@googlegroups.com にメールを送信してください。
http://groups.google.com/group/android-group-japan からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

y kiyo

unread,

Sep 27, 2014, 5:31:27 AM9/27/14

to android-g...@googlegroups.com

からす様

情報有り難うございます。

なるほど、指定された表示レイアウト枠を超えての表示は難しいかもしれないのですね…

となると、動画再生時にリストをgoneで消して全面webviewにすれば行けるかもしれないか…

>httpストリーミングの動画コンテンツとして、他の動画アプリに
>任せるという楽な手段もある気もします。

ぶっちゃけこれで良いのでintentのACTION_VIEWで行けないかな？？？

って思ったのですがうまくいかないものですね…

教えていただいた方法で試してみたいと思います。

2014年9月27日土曜日 13時27分19秒 UTC+9 karasu:

このグループから退会し、グループからのメールの配信を停止するには android-group-japan+unsub...@googlegroups.com にメールを送信してください。

y kiyo

unread,

Sep 29, 2014, 2:54:11 AM9/29/14

to android-g...@googlegroups.com

結局、色々調べてみて

http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview

で紹介されている

VideoEnabledWebChromeClient

VideoEnabledWebView

を利用して実装しました。

Fragment利用するとうまく行かなかったので、

とりあえずActivityでの利用で実装してます。

以下、実装したソースです。

-----

・MainActivity.java

package com.example.webviewtest;

import org.androidannotations.annotations.AfterViews;

import org.androidannotations.annotations.EActivity;

import org.androidannotations.annotations.ViewById;

import android.annotation.SuppressLint;

import android.content.pm.ActivityInfo;

import android.content.res.Configuration;

import android.support.v7.app.ActionBarActivity;

import android.view.View;

import android.view.ViewGroup;

import android.view.WindowManager;

import android.webkit.HttpAuthHandler;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.ListView;

@EActivity(R.layout.activity_main)

public class MainActivity extends ActionBarActivity {

private VideoEnabledWebChromeClient webChromeClient;

@ViewById

VideoEnabledWebView webView;

@ViewById

View nonVideoLayout;

@ViewById

ViewGroup videoLayout;

@ViewById

ListView listView;

ActionBarActivity act;

boolean isFullScreen;

@SuppressLint("NewApi")

@AfterViews

void initViews() {

act = this;

View loadingView = getLayoutInflater().inflate(R.layout.video_loading_progress, 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)

{

　isFullScreen = fullscreen;

// フルスクリーンの時は横対応あり

act.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_BEHIND);

listView.setVisibility(View.GONE); // フルスクリーンの時はリストを消去

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

{

isFullScreen = false;

// フルスクリーン以外は縦固定

act.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

listView.setVisibility(View.VISIBLE); // フルスクリーンでなくなったらリストを表示

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://aaa.bbb.ccc/sample.html");

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

// TODO Auto-generated method stub

if (isFullScreen != true) {

// フルスクリーン以外は縦固定

this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

}

else {

// フルスクリーンの時は横対応あり

this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_BEHIND);

}

super.onConfigurationChanged(newConfig);

}

@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();

}

-----

・activity_main（レイアウト ※最終的には上部にリスト下部にwebviewを表示したいのでlistをダミーで配置）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.webviewtest.MainActivity_"

tools:ignore="MergeRootFrame" >

<ListView

android:id="@+id/listView"

android:layout_width="match_parent"

android:layout_height="80sp" >

</ListView>

<RelativeLayout

android:id="@+id/nonVideoLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_below="@id/listView" >

<com.example.webviewtest.VideoEnabledWebView

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="match_parent"

/>

</RelativeLayout>

<RelativeLayout

android:id="@+id/videoLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_below="@id/listView"

>

<View

android:id="@+id/videoLoading"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:visibility="invisible"

/>

</RelativeLayout>

-----

・AndroidManifest.xml　※フルスクリーンの時の縦横切替のためandroid:configChangesを設定

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.webviewtest"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="19" />

<uses-permission android:name="android.permission.INTERNET" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme"

android:hardwareAccelerated="true">

<activity

android:name="com.example.webviewtest.MainActivity_"

android:configChanges="orientation|screenSize"

android:label="@string/app_name">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

-----

本当はフルスクリーン再生すると最小化ボタンがないのでバックキーでしかもどれないため、

最小化ボタンも置きたいところですがとりあえずは解決しました。

ありがとうございました。

2014年9月27日土曜日 18時31分27秒 UTC+9 y kiyo:

からす様
情報有り難うございます。

2014年9月27日土曜日 13時27分19秒 UTC+9 karasu:

<p style="margin-bottom:0px;font-size:11px;lin
...

Reply all

Reply to author

Forward