9

Tenho uma aplicação feita no Android Studio que utiliza webview e roda uma aplicação web remota. O vídeo é exibido perfeitamente na webview. Porém, a opção de fullscreen não fica disponível no player incorporado na página. Veja o código html simples:

<html> 
<body> 

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

</body> 
</html>

Achei a seguinte solução:

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

Mas essa solução não funciona nos Androids 5+, apenas anteriores.

Mesmo fazendo o arquivo do vídeo abrir diretamente na webview pelo link (http://site.com/video.mp4), ele não fica totalmente em fullscreen.

Quero que a opção de fullscreen funcione no webview. Alguém sabe de alguma solução ou alternativa para este problema? Obrigado.

4
  • 1
    Cara, eu tentei varios exemplos e varias webviews diferentes que vi por ai para tentar resolver, mas sempre tinha um bug ou outro, ou as vezes não funcionava ou parava de funcionar depois de alguns cliques, inclusive juntei partes de muitas diferentes e nada. O que penso ser a solução então é o seguinte: se o vídeo estiver em um endereço X do seu site, configure um deep link para o seu app, onde abriria um fragment com o video, ou uma nova activity. Nesse fragment/activity, você usaria a MediaPlayer API para carregar o video ou usar a VideoView para exibir. Seria um jeito simples. 17/08/2017 às 14:18
  • Coloque um exemplo de como você faria esse deep link com fragment. Se for uma alternativa funcional, eu marco como resposta certa.
    – Stéfano
    17/08/2017 às 17:08
  • Vou fazer o código e colocar como resposta ;) 17/08/2017 às 17:11
  • Fiz com activity para abrir uma outra tela, se precisar com fragment é possível fazer também, me avise se precisar 17/08/2017 às 18:00

1 Resposta 1

3
+250

Bom, segue um exemplo do deeplink funcional. Eu criei uma página HTML para ser carregada no app com o link (), chamando o app. O vídeo do exemplo peguei em http://clips.vorwaerts-gmbh.de/VfE_html5.mp4.

AndroidManifest.xml

É no manifest que eu vou fazer a configuração do deep link. O deep link nada mais é do que um caminho para dentro do app, onde vou abrir uma activity e processar o valor do que veio do deep link. A VideoActivity no manifest foi configurada para aceitar um link com o formato 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

Este arquivo foi o criado para simular, nele tem somente um link, chamando o formato que foi criado no app. Note que eu passo o nome do arquivo de video como querystring, e vou ler esse valor depois.

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

MainActivity.java

Aqui somente vou carregar a webview lendo dos 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>

Agora nesta activity que está o "pulo do gato". Nela eu vou pegar a querystring passada pelo deeplink, e carregar o arquivo no VideoView do Android.

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>

Somente com relação aos controles do videoview que não sei direito como mexer bem beleza?

Espero ter ajudado.

2
  • 1
    Funcionou perfeitamente com a URL remota e ficou bem simples. Eu apenas adicionei o MediaController no seu código java para a pessoa ter os controles do vídeo. Muito funcional, parabéns.
    – Stéfano
    18/08/2017 às 3:54
  • Fico contente em poder ajudar, e te falar ein, foi uma aventura tentar fazer somente com o webview, pena que não funcionava. 18/08/2017 às 11:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .