即使在修改设置或使用js后,Android webview也无法自动播放YouTube视频

时间:2016-12-23 23:03:56

标签: android video webview youtube

我正在Android N上测试我的应用,并尝试在我的网页浏览中加载youtube网页并自动播放它们。这是我的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");
}

以上内容在加载页面时不会自动播放youtube或vimeo视频。我还尝试将以下内容添加到TestWebViewClient

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

这实际上成功地自动播放了vimeo视频链接但是当我在youtube视频链接上使用它时,我收到以下错误:

Uncaught TypeError: Cannot read property 'play' of undefined

对于youtube视频,我也尝试在查找其类名后模拟点击播放按钮,但这也不起作用:

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

如果有一个不涉及使用Youtube Data API的解决方案,请告诉我。

1 个答案:

答案 0 :(得分:4)

我能够使用IFRAME_API找到解决方法。我现在正在使用此功能(code是视频ID,例如“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);

不需要TestWebViewClient中的更改,但必须设置:

mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);