在 Android webview 中通过 iframe 加载 Youtube 视频答案

【问题标题】：Loading Youtube video through iframe in Android webview在 Android webview 中通过 iframe 加载 Youtube 视频
【发布时间】：2012-12-18 20:21:44
【问题描述】：

我想使用 iframe 将 youtube 视频加载到 Android webview

这是我的布局 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>

我的代码是：

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", "");

     }
}

另外我提供<uses-permission android:name="android.permission.INTERNET"/>

&android:hardwareAccelerated="true"

当我运行它时，我没有得到任何结果，它只是显示黑屏

我试过this 。但这为我提供了.3gp Quality 上的视频。但我需要来自 youtube 的原始质量视频。这就是我使用iframe 的原因。

我尝试使用<object></object> 和<video></video> 而不是iframe 编写代码。但它并没有解决我的问题。

当我在模拟器上运行这段代码时，它会显示

按下播放按钮之前

按下视频播放按钮后

我认为我们不能在模拟器上播放视频，因为它是一个虚拟设备

但是当我在手机上运行它时，它甚至没有显示这个结果。

我尝试 iframe 并附加一个文档，它在手机和模拟器上都可以正常工作

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>";

所以请帮我把视频加载到这个框架中。

（我在手机上运行）。有什么问题？ iframe 也可以在 Android 2.1 上运行吗？

有人试过Youtube Api 吗？

【问题讨论】：

标签： android iframe youtube android-webview

【解决方案1】：

我有完全定制的 ifra 用于 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;
    }

}

【讨论】：

谷歌是否允许使用 iframe 在您的应用中显示 youtube 视频而不使用 Youtube Api？？
@Nepster 是的。你可以这样做。我在 google play 上有很多带有 iframe 的应用
嗨@tejshah，感谢您的解决方案，但它不适用于 Android TV，显示视频不可用，请在 Youtube 上观看。你能帮帮我吗？非常感谢您的支持。
@AkhileshDharDubey Unavailable 表示其与视频 ID 相关的某些问题。测试只需添加“8YPXv7xKh2w”这个 id 作为参数，您也可以使用手机设备进行测试。它在那里工作？

【解决方案2】：

如android Webview documentation中所述，

HTML5 视频支持

为了在您的应用程序中支持内嵌 HTML5 视频，您需要开启硬件加速，并设置 WebChromeClient。

对于全屏支持，需要实现 onShowCustomView(View, WebChromeClient.CustomViewCallback) 和 onHideCustomView()，getVideoLoadingProgressView() 是可选的。

【讨论】：

当你做了所有这些但它仍然是黑色的？

【解决方案3】：

这对我有用：

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());

【讨论】：

【解决方案4】：

试试这个它的工作正常..

    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");

【讨论】：

【解决方案5】：

我不是 Android webview 方面的专家，但我遇到了类似的网页问题。

我要做的是使用标签并确保它在标签中有 onclick="this.play();。onclick 事件是专门针对 Android 的。Chrome、Safari、Firefox 不需要它。

例如：

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

如果没有 onclick，Android 浏览器将无法运行。由于 webview 调用的是浏览器，我怀疑是一样的。

并确保在源标签中不使用 codec 属性。

希望对你有所帮助。

【讨论】：

我正在使用来自 youtube 的视频，所以我应该如何设置 <video></video> 标签的来源 (src="")
在网站上，src 类似于：“youtube.com/watch?v=U7UroLFYlzE”。
你见过这个吗？ stackoverflow.com/questions/12708890/…
它说你必须添加 wv.setWebChromeClient(new WebChromeClient() { });
在 html 文件上一切正常......但是当它尝试将其加载到 android web 视图时......它无法正常工作......我会再次检查并通知你。

【解决方案6】：

这并不完全是您问题的直接答案，但我相信您可能想要使用新发布的 Android Youtube API。它应该允许将 youtube 视频播放添加到您的应用程序中，因此您不必将它们注入 iFrame 中的 web 视图中。这很愚蠢，而且并非所有 Android 设备都会安装 Flash :)

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

【讨论】：

我已经检查了这个..当我运行演示应用程序和 api 时，它会强制我下载 youtube 应用程序..所以我怀疑这个 YouTube api 使用官方 YouTube 应用程序播放视频..你能澄清一下吗？
检查this
是的，根据他们网站上的文档，我相信它确实做到了。

【解决方案7】：

您可以再次访问我的question。我创建了一个功能，为您提供所有 youtube 视频的直接链接（包括总部链接）。现在您可以使用 mp4 等代替可怜的 3gp。

【讨论】：

【解决方案8】：

使用 WebChromeClient 允许您处理 Javascript 对话框、网站图标、标题和进度：

wv = setWebChromeClient(new WebChromeClient());

【讨论】：

您能否在您的回答中添加一些细节，说明问题中的问题是什么，以及如何解决它。
使用 WebChromeClient 可以处理 Javascript 对话框、网站图标、标题和进度。

【解决方案9】：

一切正常

我的 Java 文件

    String path="<iframe src='https://www.youtube.com/embed/94zICkZLQpY' width='100%' height='100%' style='border: none;'></iframe>";
    webView.loadData(path,"text/html","utf-8");
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebChromeClient(new WebChromeClient());

这里 94zICkZLQpY 是您将在任何 youtube 视频中获得的嵌入式代码我可以观看的正常 youtube 视频链接是 https://www.youtube.com/watch?v=94zICkZLQpY&feature=youtu.be

【讨论】：