Android webview unable to autoplay youtube video even after modifying settings or using js

Question

I am testing my app on Android N and trying to load youtube pages in my webview and autoplaying them. This is my onCreate:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView = (WebView) findViewById(R.id.activity_main_webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.setWebViewClient(new TestWebViewClient());
    mWebView.setWebChromeClient(new WebChromeClient());
    mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);


    mWebView.loadUrl("https://www.youtube.com/watch?v=hzz_6dmv03I?autoplay=1");
    //mWebView.loadUrl("https://vimeo.com/117116735");
}

The above does not autoplay the youtube or vimeo video upon loading the page. I also tried adding the following to my TestWebViewClient

public class TestWebViewClient extends WebViewClient {
    public void onPageFinished(WebView view, String url) {
        view.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); 
    }
}

This actually succeeds in autoplaying the vimeo video link but when I use it on the youtube video link then I get the following error:

Uncaught TypeError: Cannot read property 'play' of undefined

For the youtube video I also tried simulating a click on the play button after looking up its class name but that also does not work:

public class TestWebViewClient extends WebViewClient {
    public void onPageFinished(WebView view, String url) { 
        view.loadUrl("javascript:(function() { 
            document.getElementsByClassName('ytp-play-button')[0].click();
        })"); 
    }
}

Please let me know if there is a solution to this that does not involve using the Youtube Data API.

Excuse me, have you tried with a Videoview instead of Webview? — Silvio Tamaso D'Onofrio
– Silvio Tamaso D'Onofrio, Commented Dec 23, 2016 at 23:23
I haven't as I need my app to display regular urls as well so I would prefer using a webview. — doomguy
– doomguy, Commented Dec 23, 2016 at 23:29
Ok, then the question is: Webview has the "play" property as you wish? — Silvio Tamaso D'Onofrio
– Silvio Tamaso D'Onofrio, Commented Dec 23, 2016 at 23:36

doomguy · Accepted Answer · 2016-12-26 03:36:53Z

7

I was able to find a workaround for this using IFRAME_API. I am using this now (code is the video id such as "hzz_6dmv03I"):

 void loadYTVideoInWebView(String code) {
    String frameVideo = "<html><body style='margin:0px;padding:0px;'>\n" +
            "        <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>\n" +
            "                var player;\n" +
            "        function onYouTubeIframeAPIReady()\n" +
            "        {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}\n" +
            "        function onPlayerReady(event){player.playVideo();}\n" +
            "        </script>\n" +
            "        <iframe id='playerId' type='text/html' width='400' height='360'\n" +
            "        src='https://www.youtube.com/embed/"+code+"?enablejsapi=1&autoplay=1' frameborder='0'>\n" +
            "        </body></html>";
    mWebView.loadDataWithBaseURL("http://www.youtube.com", frameVideo, "text/html", "utf-8", null);

Changes in the TestWebViewClient weren't required but it was necessary to set:

mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);

answered Dec 26, 2016 at 3:36

doomguy

41910 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

doomguy Over a year ago

Yes because, I myself answered it :) will accept it.

stranigiorni Over a year ago

oh my, i didn't realize it was you yourself :) thank you btw! great answer

Collectives™ on Stack Overflow

Android webview unable to autoplay youtube video even after modifying settings or using js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related