2012-10-03 21 views
42

Ich bin zu spielen YouTube Video in WebView, WebView zeigt ersten Blick auf Video mit Play-Taste, aber nach dem Klicken auf Play-Taste starten Fortschrittsbalken und nach 2-3 Sekunden stoppen Fortschrittsbalken und Bildschirm leer mit schwarzer Farbe.YouTube Video spielt nicht in WebView - Android

Bild1: Video schaut zuerst mit Play-Taste

Bild2: Nach dem Klick auf dem Bildschirm Play-Taste erlischt.

Bitte! Hilf mir, warum das Video nicht startet.

BILD: 1 This is first look of web view

IMAGE: 2 enter image description here

Dies ist Code meine Quelle YouTubeVideo in Webansicht zu spielen .. Bitte helfen Sie mir ...

public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
    WebView wv = (WebView) findViewById(R.id.webView1); 
    wv.getSettings().setJavaScriptEnabled(true); 
    wv.getSettings().setPluginsEnabled(true); 
    final String mimeType = "text/html"; 
    final String encoding = "UTF-8"; 
    String html = getHTML(); 
    wv.loadDataWithBaseURL("", html, mimeType, encoding, ""); 
} 

public String getHTML() { 
    String html = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/" 
      + "J2fB5XWj6IE" 
      + "?fs=0\" frameborder=\"0\">\n" 
      + "</iframe>\n"; 
    return html; 
} 
+0

dies für Sie mit allen Versionen von Android Passiert? Ich habe ähnliches gesehen aber nur unter 4.1 – Nick

+0

@Nick: Dieses Problem auch mit Android 3.0, 4.0. –

+0

@RanjitChandel Ich habe das gleiche Problem ... –

Antwort

66

diese Zeilen hinzufügen vor Laden von HTML-Inhalten in Ihr WebView.

wv.setWebChromeClient(new WebChromeClient() { 
}); 

Aus der Dokumentation:

Um Inline-HTML5-Video in Ihrer Anwendung zu unterstützen, müssen Sie die Hardware-Beschleunigung eingeschaltet haben, und legen Sie einen WebChromeClient. Für Vollbildunterstützung sind Implementierungen von onShowCustomView (View, WebChromeClient.CustomViewCallback) und onHideCustomView() erforderlich, getVideoLoadingProgressView() ist optional.

+0

Bitte geben Sie Ihre Kommentare hier auch http://StackOverflow.com/Questions/18533678/Playing-Youtube-Videos-Smoothly-in-Web-view – anshul

+1

noch aus dem doc, über OnShowCustomView(): Diese Methode wurde in API-Ebene veraltet 18. Diese Methode unterstützt den veralteten Plugin-Mechanismus und wird in Zukunft nicht mehr aufgerufen – elgui

+0

Awesome!Danke – NeoVe

5

Es gibt ein Problem mit den youtbe Videos auf den mobilen Geräten gestreamt. Wenn Sie direkt versuchen, die URL in der Webansicht zu laden und auszuführen, wird das Video nicht wiedergegeben. Eine schwierige Möglichkeit, dieses Problem zu lösen, besteht darin, das Video in der Videoansicht zu streamen. Ich habe das nicht versucht, aber das kann gemacht werden.
Andere Möglichkeit, die Youtube-Videos abzuspielen, werde ich dies als den einfacheren Weg bezeichnen, den Benutzer-Agent in den Web-Ansicht-Einstellungen vom mobilen Gerät auf einen Desktop zu ändern. Der Benutzeragent gibt den Typ des Geräts an, auf dem das Youtube-Video ausgeführt wird, und dementsprechend wird diese Art von Webseite vom Server gesendet. Auf diese Weise kann das YouTube-Video gestreamt und abgespielt werden. Hier ist, wie Sie dies tun können:

public static final int USER_MOBILE = 0; 
public static final int USER_DESKTOP = 1; 
wv.getSettings().setUserAgent(USER_DESKTOP); // 1 is for the desktop 
+0

Einstellen der User-Agent auf Desktop bitten, das Adobe Plugin herunterladen jede Hilfe wird geschätzt. –

+0

WebSettings.setUserAgent (int i) jetzt veraltet und löste auch mein Problem nicht. –

17

Der folgende Code benötigt, um spielen wollen, ist das Video-Player zu zeigen, dass durch gestartet das Webkern-Framework. Der Schlüssel für den gesamten Ablauf ist, dass das VideoView an den WebChromeClient zurückgegeben wird und Sie diese Ansicht an Ihre Ansichtshierarchie anhängen müssen.

Ich habe es durch Überprüfung der Browser-Quellcode als Teil der AOSP zusammengestellt.

Dieser Code verweist auf 4 Ansichten, die möglicherweise nicht offensichtlich sind.Die Ansichtshierarchie ist:

  • FrameLayout mContentView (root)
  • WebView mWebView (Kind mContentView)
  • FrameLAyout mCustomViewContainer (Kind mContentView)
  • View mCustomView (Kind mCustomViewContainer)

Die Ansichten werden als Teil des Einrichtens der Containeraktivität konfiguriert.

<FrameLayout 
    android:id="@+id/fullscreen_custom_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#FF000000"/> 

    <FrameLayout 
     android:id="@+id/main_content" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" > 

     <WebView 
      android:id="@+id/webView" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" /> 
    </FrameLayout> 
</FrameLayout> 

In Ihren Aktivitäten onCreate:

mContentView = (FrameLayout) findViewById(R.id.main_content); 
    mWebView = (WebView) findViewById(R.id.webView); 
    mCustomViewContainer = (FrameLayout) findViewById(R.id.fullscreen_custom_content); 

ein WebChromeClient mit mWebView registrieren.

void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) 
{ 
    // if a view already exists then immediately terminate the new one 
    if (mCustomView != null) 
    { 
     callback.onCustomViewHidden(); 
     return; 
    } 

    // Add the custom view to its container. 
    mCustomViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER); 
    mCustomView = view; 
    mCustomViewCallback = callback; 

    // hide main browser view 
    mContentView.setVisibility(View.GONE); 

    // Finally show the custom view container. 
    mCustomViewContainer.setVisibility(View.VISIBLE); 
    mCustomViewContainer.bringToFront(); 
} 

void onHideCustomView() 
{ 
    if (mCustomView == null) 
     return; 

    // Hide the custom view. 
    mCustomView.setVisibility(View.GONE); 
    // Remove the custom view from its container. 
    mCustomViewContainer.removeView(mCustomView); 
    mCustomView = null; 
    mCustomViewContainer.setVisibility(View.GONE); 
    mCustomViewCallback.onCustomViewHidden(); 

    // Show the content view. 
    mContentView.setVisibility(View.VISIBLE); 
} 

public Bitmap getDefaultVideoPoster() 
{ 
    if (mDefaultVideoPoster == null) 
    { 
     mDefaultVideoPoster = BitmapFactory.decodeResource(getResources(), R.drawable.default_video_poster); 
    } 
    return mDefaultVideoPoster; 
} 

public View getVideoLoadingProgressView() 
{ 
    if (mVideoProgressView == null) 
    { 
     LayoutInflater inflater = LayoutInflater.from(this); 
     mVideoProgressView = inflater.inflate(R.layout.video_loading_progress, null); 
    } 
    return mVideoProgressView; 
} 

Sie auch ähnliche Aktivität Life-Cycle-Bindungen hinzufügen möchten:

@Override 
protected void onStop() 
{ 
    super.onStop(); 
    if (mCustomView != null) 
    { 
     if (mCustomViewCallback != null) 
      mCustomViewCallback.onCustomViewHidden(); 
     mCustomView = null; 
    } 
} 

@Override 
public void onBackPressed() 
{ 
    if (mCustomView != null) 
    { 
     onHideCustomView(); 
    } else 
    { 
     finish(); 
    } 
} 

Um Ihre Aktivität das Video ausblenden zu machen, wenn die Aktivität 4 Methoden - Das Client sollte die folgenden 2 außer Kraft setzen gestoppt oder die Zurück-Taste gedrückt wird.

+9

könnten Sie bitte einen sauberen Code zur Verfügung stellen? Es gibt so viele Fehler? Für z.B. Wo ist der mCustomView? Was ist COVER_SCREEN_GRAVITY_CENTER? –

+0

mCustomView wird im Hauptteil der Antwort beschrieben. COVER_SCREEN_GRAVITY_CENTER ist ein LayoutParameter mit Grenzen, die auf MATCH_PARENT und Schwerkraft auf CENTER gesetzt sind. Ich dachte, das war offensichtlich, Entschuldigung. –

0

Dieses

startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(stringUrl))); 
12

webview.setWebChromeClient(new WebChromeClient()); In Versuchen und

if (Build.VERSION.SDK_INT < 8) { 
      webview.getSettings().setPluginsEnabled(true); 
     } else { 
      webview.getSettings().setPluginState(PluginState.ON); 
     } 

Thnaks

+0

Ja, das war das fehlende Glied für mich. Es zeigt jetzt die YouTube Play-Schaltfläche Miniaturansicht im Videoelement an. –

+1

es funktioniert nicht für mich. Außerdem setPluginState (PluginState.ON); ist enttäuscht. – Cocorico

2

ich den Fragesteller Code kopiert hinzufügen Plugins für Ihr Video zu ermöglichen, und es funktionierte für mich .... Ich denke, dass Sie Flash-Zahler installieren müssen .. di u ?? und hast du Internet-Erlaubnis hinzugefügt ???

btw mein Code hier ...

package com.example.youtube; 



import android.annotation.SuppressLint; 
import android.app.Activity; 
import android.content.Intent; 
import android.net.Uri; 
import android.os.Bundle; 
import android.os.Handler; 
import android.widget.Button; 
import android.widget.EditText; 
import android.widget.ProgressBar; 
import android.widget.Toast; 
import android.util.Log; 
import android.view.Menu; 
import android.view.Window; 
import android.view.WindowManager; 
import android.webkit.DownloadListener; 
import android.webkit.WebChromeClient; 
import android.webkit.WebSettings; 
import android.webkit.WebView; 
import android.webkit.WebChromeClient; 
import android.webkit.WebViewClient; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.View.OnClickListener; 
import android.widget.AbsoluteLayout; 

import android.content.BroadcastReceiver; 
import android.content.Context; 
import android.content.IntentFilter; 
import android.os.AsyncTask; 
import android.util.Log; 
import android.widget.TextView; 


import android.location.Location; 
import android.location.LocationListener; 
import android.location.LocationManager; 
public class MainActivity extends Activity{ 


    @SuppressLint("SetJavaScriptEnabled") 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     requestWindowFeature(Window.FEATURE_NO_TITLE); 
     getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
       WindowManager.LayoutParams.FLAG_FULLSCREEN); 
     getWindow().requestFeature(Window.FEATURE_PROGRESS); 




      setContentView(R.layout.activity_main); 


final ProgressBar Pbar; 

Pbar = (ProgressBar) findViewById(R.id.pB4); 
WebView wv = (WebView) findViewById(R.id.webVie1); 
//wv.setWebViewClient(new Callback()); 
WebSettings webSettings = wv.getSettings(); 
webSettings.setBuiltInZoomControls(true); 
webSettings.setJavaScriptEnabled(true); 
//wv.setBackgroundColor(0x919191); 
final String mimeType = "text/html"; 
final String encoding = "UTF-8"; 
String html = getHTML(); 
wv.loadDataWithBaseURL("", html, mimeType, encoding, ""); 




final Activity activity = this; 

wv.setWebChromeClient(new WebChromeClient() { 
     public void onProgressChanged(WebView view, int progress) { 
     // Activities and WebViews measure progress with different scales. 
     // The progress meter will automatically disappear when we reach 100% 

     activity.setProgress(progress * 100); 
     { 
      if(progress < 100 && Pbar.getVisibility() == ProgressBar.GONE){ 
       Pbar.setVisibility(ProgressBar.VISIBLE); 

      } 
      Pbar.setProgress(progress); 
      if(progress == 100) { 
       Pbar.setVisibility(ProgressBar.GONE); 

      } 
      } 
     } 
    }); 
    wv.setWebViewClient(new WebViewClient() { 
     public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { 
     Toast.makeText(activity, "Oh no! " + description, Toast.LENGTH_LONG).show(); 
     } 
    }); 
    wv.setDownloadListener(new DownloadListener() 
    { 

     public void onDownloadStart(String url, String userAgent,String contentDisposition, String mimetype,long contentLength) 
     { 
      Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); 

      startActivity(intent); 
     } 


    }); 







} 

    private String getHTML() { 
     // TODO Auto-generated method stub 
     String html1 = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/" 
       + "J2fB5XWj6IE" 
       + "?fs=0\" frameborder=\"0\">\n" 
       + "</iframe>\n"; 
     return html1; 
    } 


    /* public void onPause() 
    { 
     super.onPause(); 
     System.exit(0); 
    }*/ 




} 

Layout-Datei

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

<LinearLayout 
    android:id="@+id/page_buttons" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:gravity="center_horizontal" 
    android:orientation="horizontal" > 


</LinearLayout> 

<WebView 
    android:id="@+id/webVie1" 
    android:layout_width="316dp" 
    android:layout_height="392dp" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentTop="true" 
    android:layout_weight="0.99" /> 

<ProgressBar 
    android:id="@+id/pB4" 
    style="?android:attr/progressBarStyleHorizontal" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true"/> /> 
</LinearLayout> 
Verwandte Themen