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:
- Android API
- Iframe API
- Javascript API
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>