How to embed Youtube video in Android WebView?

2019-03-10 11:12发布

站内问答 / JavaScript
1085 3 5

I want to embed a youtube video in my Android app. It has a Navigation Drawer, and when this drawer is opened, the video must to keep playing. And I'd like my app could be capable of playing video with copyright restriction, for example, videos from Vevo. My first try was simply load the embed url (https://www.youtube.com/embed/VIDEO_ID) in a WebView with a Chrome Client, but for many videos, for example that from Vevo, like this, I see this message:

This Video Contains content from Vevo. It is restricted from playback on certain sites

To handle this error, I decided to use the Youtube API.

Between the available implementations of this lib, I've tried these:

The Android API has the advantage that I can play video with the mentioned restriction, but it was discarded because its default behavior is the player stops the video when the Drawer is opened.

With the Iframe API, I can play videos when the Drawer opens, but not that with the restriction.

My last tentative is using the Javascript API. Currently, I have the same situation that iframe, that is, I can't play videos with restriction.

However I think this is the right way of finding a solution. In the api reference, they recommend using the SWFObject, but as far as i know, there is not flah available for mobile, like exposed in this answer. So, there is another way of embeding video in my WebView?

And another doubt is: How do mobile sites can play video from youtube, even that with the "certain sites" restriction? Please understand that who is asking here is an Android developer not much experienced with Javascript.

Currently, I have this piece of code:

Layout where will be loaded the player:

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

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

Fragment that inflates this layout:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment, null);

    WebView webView = (WebView) view.findViewById(R.id.web_view);

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

    webView.loadUrl("file:///android_asset/player_webview.html");
    webView.setWebViewClient(new CustomClient());

    return view;
}

private class CustomClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webview, String url) {
        webview.setWebChromeClient(new WebChromeClient());
        webview.loadUrl(url);
        return true;
    }
}

HTML file

<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="./swfobject/swfobject.js"></script>

  <div id="ytapiplayer">
      You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/G90AgiAMM6k?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>
</head>
</html>

3条回答
虎瘦雄心在
2楼-- · 2019-03-10 11:18

I think that a similar question that has been asked might be of help to you and might be a good starting point. But the second link I am going to post might be of more help.

Play Youtube HTML5 embedded Video in Android WebView

Also, I found on a separate website this comment that might be your magic answer:

"The custom player you are mentioning most likely uses a rather well-known trick; fooling youtube into providing an MP4-version of that video, download it progressively and serve it back via a local http-server to MPMoviePlayerController.

The restriction is based on a reverse lookup of the IP address you are using when accessing the video in question. Use a proxy from within the US and you will see that it suddenly plays without any problem." http://w3facility.org/question/embed-youtube-videos-with-contains-content-from-it-is-restricted-from-playback-on-certain-site/

I hope this helps!!

查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
3楼-- · 2019-03-10 11:28

I recently met the same problem and solved it, hope to be helpful.

It's because this video is not playable on all websites, so if you load a local html, the "Referer" http header is empty, then youtube can't determine if your website is on the banned list. The solution is just put your html on your own web server, then load it through url, then the "Referer" header will be your web server address, problem solved.

查看更多
0人赞 添加讨论(0) 举报
放我归山
4楼-- · 2019-03-10 11:42

For my case Android 4.4.4, adding the Referer header "https://www.youtube.com" in first argument of loadDataWithBaseURL() saved my day!

    mWebView = (WebView) getActivity().findViewById(R.id.webView);

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

    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setLoadWithOverviewMode(true);
    mWebView.setWebViewClient(new WebViewClient());
    mWebView.setBackgroundColor(0x00000000);
    mWebView.getSettings().setBuiltInZoomControls(true);
    String html = "<iframe height='95%' width='100%' src='" + videoURL + "' frameborder='0' allowfullscreen></iframe>";
    mWebView.loadDataWithBaseURL("https://www.youtube.com", html, "text/html", "UTF-8", null);
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)