Fullscreen Video on Android Webview

Asked

Viewed 1,343 times

9

I have an application made on Android Studio using webview and runs a remote web application. The video is displayed perfectly on the webview. However, the option to fullscreen 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:

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

But this solution does not work on Androids 5+, only earlier.

Even making the video file open directly in webview by link (http://site.com/video.mp4), it does not get fully fullscreen.

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

  • 1

    Dude, I’ve tried a lot of examples and a lot of different webviews that I’ve seen around to try to solve, but there was always a bug or other, or sometimes it didn’t work or it stopped working after a few clicks, and I’ve even put together parts of a lot of different and nothing. What I think is the solution then is the following: if the video is in an X address of your site, set up a deep link to your app, where you would open a Fragment with the video, or a new Activity. In this Fragment/Activity, you would use the Mediaplayer API to upload the video or use Videoview to display. It would be a simple way.

  • Put an example of how you would do this deep link with Fragment. If it’s a functional alternative, I mark it as the right answer.

  • I’ll write the code and put it in response ;)

  • I made with Activity to open another screen, if you need with Fragment is possible to do too, let me know if you need

1 answer

3


Well, here’s an example of the functional deeplink. I created an HTML page to load in the app with the link (), calling the app. The example video I took in http://clips.vorwaerts-gmbh.de/VfE_html5.mp4.

Androidmanifest.xml

It’s in the manifest that I’m going to set up the deep link. The deep link is nothing more than a way into the app, where I will open an Activity and process the value of what came from the deep link. Videoactivity in the manifest has been configured to accept a link with deeplinkvideo:/video format

<?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, in it has only one link, calling the format that was created in the app. Note that I pass the video file name as querystring, and I will read this 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 that is the "cat jump". In it I will take the querystring passed by deeplink, and load the file in 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 regard to the video view controls that I don’t know how to move beauty well?

I hope I’ve helped.

  • 1

    It worked perfectly with the remote URL and was very simple. I just added Mediacontroller to your java code for the person to have the video controls. Very functional, congratulations.

  • I’m glad to be able to help, and tell you ein, it was an adventure try to do only with webview, too bad it didn’t work.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.