10

He estado buscando la manera de hacer que funcione el botón de pantalla completa del reproductor Video.JS desde una vista Webview en android.introducir la descripción de la imagen aquí

Este es el código que estoy probando, solo funciona con los vídeos de youtube.

he visto que el botón de pantalla completa si funciona desde el navegador chrome para celulares

Cualquier ayuda les estaré eternamente agradecido

MainActivity.java

  import android.app.Activity;
  import android.graphics.Bitmap;
  import android.os.Bundle;
  import android.view.KeyEvent;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.webkit.WebChromeClient;
  import android.webkit.WebView;
  import android.webkit.WebViewClient;
  import android.widget.FrameLayout;

  public class MainActivity extends Activity {
  private WebView webView;
  private FrameLayout customViewContainer;
  private WebChromeClient.CustomViewCallback customViewCallback;
  private View mCustomView;
  private myWebChromeClient mWebChromeClient;
  private myWebViewClient mWebViewClient;

/**
 * Called when the activity is first created.
 */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    customViewContainer = (FrameLayout)    findViewById(R.id.customViewContainer);
    webView = (WebView) findViewById(R.id.webView);

    mWebViewClient = new myWebViewClient();
    webView.setWebViewClient(mWebViewClient);

    mWebChromeClient = new myWebChromeClient();
    webView.setWebChromeClient(mWebChromeClient);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setAppCacheEnabled(true);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setSaveFormData(true);
    webView.loadUrl("http://videojs.com/");
}

public boolean inCustomView() {
    return (mCustomView != null);
}

public void hideCustomView() {
    mWebChromeClient.onHideCustomView();
}

@Override
protected void onPause() {
    super.onPause();    //To change body of overridden methods use File | Settings | File Templates.
    webView.onPause();
}

@Override
protected void onResume() {
    super.onResume();    //To change body of overridden methods use File | Settings | File Templates.
    webView.onResume();
}

@Override
protected void onStop() {
    super.onStop();    //To change body of overridden methods use File | Settings | File Templates.
    if (inCustomView()) {
        hideCustomView();
    }
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {

        if (inCustomView()) {
            hideCustomView();
            return true;
        }

        if ((mCustomView == null) && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
    }
    return super.onKeyDown(keyCode, event);
}

class myWebChromeClient extends WebChromeClient {
    private Bitmap mDefaultVideoPoster;
    private View mVideoProgressView;

    @Override
    public void onShowCustomView(View view, int requestedOrientation, CustomViewCallback callback) {
        onShowCustomView(view, callback);    //To change body of overridden methods use File | Settings | File Templates.
    }

    @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;
        }
        mCustomView = view;
        webView.setVisibility(View.GONE);
        customViewContainer.setVisibility(View.VISIBLE);
        customViewContainer.addView(view);
        customViewCallback = callback;
    }

    @Override
    public View getVideoLoadingProgressView() {

        if (mVideoProgressView == null) {
            LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
            mVideoProgressView = inflater.inflate(R.layout.video_progress, null);
        }
        return mVideoProgressView;
    }

    @Override
    public void onHideCustomView() {
        super.onHideCustomView();    //To change body of overridden methods use File | Settings | File Templates.
        if (mCustomView == null)
            return;

        webView.setVisibility(View.VISIBLE);
        customViewContainer.setVisibility(View.GONE);

        // Hide the custom view.
        mCustomView.setVisibility(View.GONE);

        // Remove the custom view from its container.
        customViewContainer.removeView(mCustomView);
        customViewCallback.onCustomViewHidden();

        mCustomView = null;
    }
}

class myWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view, url);    //To change       body of overridden methods use File | Settings | File Templates.
    }
  }



 }

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView"
        android:layout_gravity="center"
        />
    <FrameLayout
        android:id="@+id/customViewContainer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone"
        />
    </LinearLayout>
6
  • Prueba con una ruta https, ya que esto puedo ser un factor importante
    – Devix
    el 17 feb. 2017 a las 18:32
  • Tendría un url de video que estas utilizando para compartir y revisar?
    – Jorgesys
    el 25 feb. 2017 a las 19:46
  • ¿El vídeo viene en un <iframe>? Si es así prueba a ponerle <iframe allowfullscreen [y todo lo demás]>
    – A. Cedano
    el 26 feb. 2017 a las 4:48
  • el url del vídeo seria el que esta en la demostración del player en el sitio sitio oficial videojs.com creo que este es un problema que no ha sido resuelto, solamente he visto que funcione des de el navegador web de google chrome para android, peor nose como lo lograron y como implementarlo en mi WebView el 26 feb. 2017 a las 21:05
  • @JESUSESPINOSA La funcionalidad de VideoJS en un navegador es diferente a la ejecución dentro de un WebView, buscando realizar modo "Full Screen" la opción es realizarlo nativamente, agrego una opción que he usado con éxito! .
    – Jorgesys
    el 1 mar. 2017 a las 0:59

3 respuestas 3

4
+50

Es muy importante comentar que un WebView es una vista que despliega paginas web como si fuera un navegador pero en realidad muy limitado, ( a diferencia de UIWebView en iOS que puede cargar una página sin problemas), en este caso si deseas usar un framework basado en Javascript, aun y cuando habilites la ejecución de Javascript en realidad sería difícil obtener toda la funcionalidad.

Para lograr funcione un player VideoJS dentro de un navegador y lograr el modo "Full Screen", sería muy complicado, para esto la opción tendría que ser nativa.

Te recomiendo una opción que es JieCaoVideoPlayer, por medio de esta librería podrás reproducir el video en modo "Full Screen" sin problema, comparado con otras opciones al rotar funciona correctamente.

introducir la descripción de la imagen aquí

2
  • 1
    Gracias por su respuesta, habrá alguna forma de implementarlo de una manera sencilla en el WebView que ya les he presentado, lo único que dese es que funcione el botón de pantalla completa el 4 mar. 2017 a las 23:49
  • Ya he probado esta alternativa y nada sigue sin funcionar el 11 mar. 2017 a las 17:14
2

Puede servirte algo así:

public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // remover linea de titulo
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.main);
}}

O bien editando el manifiesto:

<activity android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>

Fuente:Stackoverflow

Y la tercera alternativa (y no por eso peor): GitHub 'MainActivity full screen'

1

Intenta agregar lo siguiente a tu WebView:

webView.setWebChromeClient(new WebChromeClient() {

        public void onShowCustomView (View view, WebChromeClient.CustomViewCallback callback) {
            //Crear un toast para ver que pasa
        }

        public void onHideCustomView () {
            //Crear otro toast para ver que pasa
        }

    });

También puedes ver la respuestas de esta pregunta.

O bien, te dejo esta pregunta similiar en el cual el OP lo solucionó buscando la palabra "fullscreen" en el link del video, de esa manera si encontraba esa palabra abría el video con el reproductor local de android.

3
  • hola gracias por responder, bien agregue la linea que me comentaste, no se si lo hice correctamente, la puse dentro del onCreate(Bundle savedInstanceState){ } pero no arroja ninguno de los toast, tambien forzosamente requiero que sea el videojs player por los subtitulos y los plguins, y el código que me sugieres en ver la respuesta de esta pregunta es el que estoy probando el 17 feb. 2017 a las 17:30
  • :\ Que mal, entonces mejor usa esto gist.github.com/benvium/5907542 a lo que veo según si funciona.
    – x4mp73r
    el 17 feb. 2017 a las 17:38
  • no, nada, tuve problemas con //import max.max.qmovies2.videoenabledwebview.R; esta linea que me manda error así que la comente y luego corrió, pero sigue sin funcionar el botón de pantalla completa de videojs el 18 feb. 2017 a las 18:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.