Fullscreen Video on Android Webview

9

I have an application made in Android Studio that uses webview and runs a remote web application. The video is displayed perfectly in the webview. However, the fullscreen option is not available in the embedded player on the page. See the simple html code:

<html> 
<body> 

<video width="400" controls>
  <source src="video.mp4" type="video/mp4">
</video>

</body> 
</html>

I found the following solution:

link

But this solution does not work on Androids 5+ , just previous ones.

Even though the video file opens directly on the webview through the link ( link ), it is not completely fullscreen.

I want the fullscreen option to work in webview. Does anyone know of any solution or alternative to this problem? Thank you.

    
asked by anonymous 10.08.2017 / 17:53

1 answer

3

Well, here's an example of the functional deeplink. I created an HTML page to be loaded into the app with the link (), calling the app. The sample video I took at link .

  

AndroidManifest.xml

It's in the manifest that I'm going to do the deep link setup. The deep link is nothing more than a path into the app, where I'll open an activity and process the value of what came from the deep link. VideoActivity no manifest has been configured to accept a link with the format deeplinkvideo: // video

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.grupoestudos.deeplinkwebview">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".VideoActivity" android:theme="@style/AppTheme.FullScreen"  android:screenOrientation="landscape">
            <intent-filter android:label="VideoDeepLink">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="deeplinkvideo"
                    android:host="video" />
            </intent-filter>
        </activity>
    </application>

</manifest>
  

styles.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.FullScreen" parent="AppTheme">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

  

index.html

This file was created to simulate, it has only one link, calling the format that was created in the app. Note that I pass the name of the video file as querystring, and I will read that value later.

<html>
    <body>
        <a href="deeplinkvideo://video?video=VfE_html5.mp4">Link para o video</a>
    </body>
</html>
  

MainActivity.java

Here I will only load the webview reading from the assets

package com.grupoestudos.deeplinkwebview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView)findViewById(R.id.webView);

        mWebView.loadUrl("file:///android_asset/index.html");
    }
}
  

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Now in this activity is the "cat leap". In it I'll get the querystring passed by the deeplink, and load the file into the Android VideoView.

  

VideoActivity.java

package com.grupoestudos.deeplinkwebview;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.VideoView;

public class VideoActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video);

        //Este parametro vai ser importante, pois ele vai ter o id do video para carregarmos
        Uri data = getIntent().getData();

        String uri = "http://clips.vorwaerts-gmbh.de/" + data.getQueryParameter("video");
        VideoView mVideoView  = (VideoView)findViewById(R.id.videoView);
        if (mVideoView != null) {
            mVideoView.setVideoURI(Uri.parse(uri));
            mVideoView.requestFocus();
            mVideoView.start();
        }
    }
}
  

activity_video.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Only with respect to videoview controls that do not know how to handle beauty well?

I hope I have helped.

    
17.08.2017 / 19:58