web-dev-qa-db-fra.com

Chargement de vidéos Youtube via iframe dans une vue Web Android

Je souhaite charger une vidéo youtube sur une vue Web Android à l'aide d'iframe

voici ma mise en page xml

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:background="@Android:color/white"
Android:id="@+id/mainLayout">

<WebView
    Android:background="@Android:color/white"
    Android:id="@+id/webView"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" />
</RelativeLayout>

Mon code est:

public class WebTube extends Activity {

private WebView wv;

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/WBYnk3zR0os"
            + "?fs=0\" frameborder=\"0\">\n"
            + "</iframe>";

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

    setContentView(R.layout.activity_main);

    wv = (WebView)findViewById(R.id.webView); 
    wv.getSettings().setJavaScriptEnabled(true);
        wv.loadDataWithBaseURL("", html , "text/html",  "UTF-8", "");

     }
}

Aussi je fournis <uses-permission Android:name="Android.permission.INTERNET"/>

& Android:hardwareAccelerated="true"

quand je lance cela, je n'ai pas eu de résultat sa montre juste un écran noir 

J'ai essayé ceci .mais cela me fournit la vidéo sur .3gp Quality. mais j'ai besoin des vidéos de YouTube sur la qualité originale. C'est pourquoi j'utilise iframe.

J'essaie le code en utilisant <object></object> et <video></video> au lieu de iframe. mais cela n'a pas résolu mon problème.

quand je lance ce code sur l'émulateur, il montre

Avant d'appuyer sur le bouton de lecture

iframe result on emulator

Après avoir appuyé sur le bouton Lecture de la vidéo

iframe result on emulator on play button click

Je pense que nous ne pouvons pas diffuser de vidéos sur l'émulateur, car il s'agit d'un périphérique virtuel.

Mais quand je lance ça au téléphone, ça ne montre même pas ce résultat. 

J'essaie d'iframe avec un document en pièce jointe qui fonctionne très bien sur le téléphone et sur l'émulateur 

String customHtml = "<iframe src='http://docs.google.com/viewer?url=http://www.iasted.org/conferences/formatting/presentations-tips.ppt&embedded=true' width='100%' height='100%' style='border: none;'></iframe>";

Alors aidez-moi à charger des vidéos sur cette image.

(Je l'exécute au téléphone). Quel est le problème? Iframe fonctionnera-t-il également sur Android 2.1?

quelqu'un a-t-il essayé Youtube Api ? 

androidiframeyoutubeandroid-webview
11
edwin

Comme indiqué dans la Documentation Android Webview ,

Prise en charge de la vidéo HTML5

Pour prendre en charge la vidéo HTML5 en ligne dans votre application, vous devez activer l'accélération matérielle est activée , et définissez WebChromeClient .

Pour la prise en charge plein écran, les implémentations de onShowCustomView (View, WebChromeClient.CustomViewCallback) et de onHideCustomView () sont obligatoires, getVideoLoadingProgressView () est facultatif.

7
parser_failed

J'ai entièrement personnaliser l'iframe pour la vue youtube 

public class Act_VideoPlayer extends Activity {

    WebView webView;
    ProgressBar progressBar;
    ImageView back_btn;

    String video_url = "KK9bwTlAvgo", html = "";


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

        setContentView(R.layout.full_screen_youtube_video_screen);

        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

        back_btn = (ImageView) findViewById(R.id.full_videoview_btn);
            back_btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    webView.loadData("", "text/html", "UTF-8");
                    finish();
                }
            });

            webView = (WebView) findViewById(R.id.webView);
               progressBar = (ProgressBar) findViewById(R.id.progressBar);

            if (video_url.equalsIgnoreCase("")) {
                finish();
                return;
            }

            WebSettings ws = webView.getSettings();
            ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
            ws.setPluginState(WebSettings.PluginState.ON);
            ws.setJavaScriptEnabled(true);
            webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
            webView.reload();

            if (networkUtil.isConnectingToInternet(Act_VideoPlayer.this)) {
                html = getHTML(video_url);
            } else {
                html = "" + getResources().getString(R.string.The_internet_connection_appears_to_be_offline);
                CustomToast.animRedTextMethod(Act_VideoPlayer.this, getResources().getString(R.string.The_internet_connection_appears_to_be_offline));
            }

            webView.loadData(html, "text/html", "UTF-8");

            WebClientClass webViewClient = new WebClientClass(progressBar);
            webView.setWebViewClient(webViewClient);
            WebChromeClient webChromeClient = new WebChromeClient();
            webView.setWebChromeClient(webChromeClient);
    }




    @Override
    protected void onDestroy() {
        super.onDestroy();
        try {
            webView.loadData("", "text/html", "UTF-8");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        try {
            webView.loadData("", "text/html", "UTF-8");
            finish();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    public class WebClientClass extends WebViewClient {
        ProgressBar ProgressBar = null;

        WebClientClass(ProgressBar progressBar) {
            ProgressBar = progressBar;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            ProgressBar.setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            ProgressBar.setVisibility(View.GONE);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            LogShowHide.LogShowHideMethod("webview-click :", "" + url.toString());
            view.loadUrl(getHTML(video_url));
            return true;
        }
    }

    public String getHTML(String videoId) {
        String html = "<iframe class=\"youtube-player\" " + "style=\"border: 0; width: 100%; height: 96%;"
                + "padding:0px; margin:0px\" " + "id=\"ytplayer\" type=\"text/html\" "
                + "src=\"http://www.youtube.com/embed/" + videoId
                + "?&theme=dark&autohide=2&modestbranding=1&showinfo=0&autoplay=1\fs=0\" frameborder=\"0\" "
                + "allowfullscreen autobuffer " + "controls onclick=\"this.play()\">\n" + "</iframe>\n";
        LogShowHide.LogShowHideMethod("video-id from html url= ", "" + html);
        return html;
    }

}
6
tej shah

Cela a fonctionné pour moi:

WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";

        mWebView.loadData(frameVideo, "text/html", "utf-8");

        mWebView.loadUrl("http://www.youtube.com/");


        mWebView.setWebViewClient(new WebViewClient());
1
user2924714

Essayez cela fonctionne bien ..

    mWebView = (WebView) findViewById(R.id.web);
    String  videoURL = "https://www.youtube.com/embed/R52bof3tvZs";

    String vid = "<html><body style=\"margin: 0; padding: 0\"><iframe  width=\"100%\" height=\"100%\" src=\""+videoURL+"\" type=\"text/html\" frameborder=\"0\"></iframe><body><html>";

    WebChromeClient mWebChromeClient = new WebChromeClient(){
        public void onProgressChanged(WebView view, int newProgress) {
        }
    };

    mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mWebView.setWebChromeClient(mWebChromeClient);
    mWebView.setWebViewClient(new WebViewClient() {
        public void onPageFinished(WebView view, String url) {
            mWebView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()");
        }
    });
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);
    mWebView.setInitialScale(1);
    mWebView.getSettings().setLoadWithOverviewMode(true);
    mWebView.getSettings().setUseWideViewPort(true);
    if (Build.VERSION.SDK_INT < 17) {
        Log.i("GPSNETWORK", "<17");
    } else {
        Log.i("GPSNETWORK", Build.VERSION.SDK_INT+">=17");
        mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

    String myUrl = "&lt;html&gt;&lt;body style='margin:0px;padding:0px;'&gt;\n" +
            "        &lt;script type='text/javascript' src='http://www.youtube.com/iframe_api'&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;\n" +
            "                var player;\n" +
            "        function onYouTubeIframeAPIReady()\n" +
            "        {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}\n" +
            "        function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}\n" +
            "        &lt;/script&gt;\n" +
            "        &lt;iframe id='playerId' type='text/html' width='1280' height='720'\n" +
            "        src=\""+videoURL+"\"?enablejsapi=1&amp;rel=0&amp;playsinline=1&amp;autoplay=1&amp;showinfo=0&amp;autohide=1&amp;controls=0&amp;modestbranding=1' frameborder='0'&gt;\n" +
            "        &lt;/body&gt;&lt;/html&gt;";
    mWebView.loadData(""+Html.fromHtml(myUrl), "text/html", "UTF-8");
1
Deepak Gupta

Ce n'est pas exactement une réponse directe à votre question, mais je pense que vous voudrez peut-être utiliser la nouvelle API Android Youtube. Cela devrait permettre d'ajouter la lecture de vidéos youtube dans vos applications, de sorte que vous n'ayez pas à les injecter dans une vue Web dans un iFrame. C'est idiot, et tous les appareils Android n'auront pas Flash installé :)

https://developers.google.com/youtube/Android/player/

0
Artiom Chilaru

Vous pouvez visiter ma question encore. J'ai créé une fonction qui vous donne tous les liens directs de la vidéo youtube (y compris les liens hq). Maintenant, vous pouvez utiliser mp4 et ainsi au lieu du pauvre 3gp.

0
eviabs

Je ne suis pas un expert en visualisation Web Android, mais j'ai rencontré des problèmes similaires avec une page Web.

Ce que je devais faire, c’était d’utiliser tag et de s’assurer qu’il y avait onclick = "this.play (); dans la balise. L’événement onclick était spécifiquement pour Android. Chrome, Safari, Firefox n’en avaient pas besoin.

Par exemple:

<video id="video" width="320" height="240" autobuffer controls onclick="this.play();">

Sans onclick, le navigateur Android ne fonctionnerait pas. Puisque webview appelle le navigateur, je suppose que c'est la même chose.

Et assurez-vous que la balise source n'utilise PAS l'attribut codec.

J'espère que cela vous aide.

0
T1000

Utiliser WebChromeClient vous permet de gérer les dialogues Javascript, les favicons, les titres et la progression:

wv = setWebChromeClient(new WebChromeClient());
0
morteza karamooz