android webview youtube嵌入视频自动播放不起作用答案

【问题标题】：android webview youtube embed video autoplay not workingandroid webview youtube嵌入视频自动播放不起作用
【发布时间】：2015-03-18 07:39:34
【问题描述】：

我无法自动播放我的视频，请帮忙。我的sdk版本

  android:minSdkVersion="14"
    android:targetSdkVersion="19" />

我尝试按照代码中指定的方式放置 java 脚本：

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

我也尝试在 URL 中附加自动播放但不起作用 //webView.loadUrl("http://youtube.com/embed/oY2OxMpCUVY?autoplay=1");

我的网络设置 `

customViewContainer = (FrameLayout)rootView.findViewById(R.id.customViewContainer);
        webView = (WebView) rootView.findViewById(R.id.HelpView_Video);
        final GlobleClass globalVariable = (GlobleClass) GlobleClass.getContext();
        mWebViewClient = new HelpWebViewClient();
        webView.setWebViewClient(mWebViewClient);
        mWebChromeClient = new myWebChromeClient();
        webView.setWebChromeClient(mWebChromeClient);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setPluginState(PluginState.ON);
        webView.setWebViewClient(new WebViewClient() {
            // autoplay when finished loading via javascript injection
            public void onPageFinished(WebView view, String url) { webView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); }
        });
//        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
//            webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
//        }
        webView.getSettings().setAppCacheEnabled(true);
        //webView.getSettings().setBuiltInZoomControls(true);
      //  webView.getSettings().setSaveFormData(true);
        //webView.loadUrl("http://youtube.com/embed/oY2OxMpCUVY?autoplay=1");
        webView.loadUrl(globalVariable.getHelpVideoUrl());

`

【问题讨论】：

试试这个 url https://www.youtube.com/embed/oY2OxMpCUVY?autoplay=1 将 www 添加到 url。
我的视频可以正常播放，但无法自动播放。我试过你说的。。不行。。

标签： java android webview youtube youtube-javascript-api

【解决方案1】：

受 Orsi 的 answer 的启发，我能够在显示视频播放器的 WebView 中心模拟 onClick() 事件。这最终会自动播放视频，或者更确切地说，无需用户交互。

private class AutoPlayVideoWebViewClient extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // mimic onClick() event on the center of the WebView
        long delta = 100;
        long downTime = SystemClock.uptimeMillis();
        float x = view.getLeft() + (view.getWidth()/2);
        float y = view.getTop() + (view.getHeight()/2);

        MotionEvent tapDownEvent = MotionEvent.obtain(downTime, downTime + delta, MotionEvent.ACTION_DOWN, x, y, 0);
        tapDownEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);
        MotionEvent tapUpEvent = MotionEvent.obtain(downTime, downTime + delta + 2, MotionEvent.ACTION_UP, x, y, 0);
        tapUpEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);

        view.dispatchTouchEvent(tapDownEvent);
        view.dispatchTouchEvent(tapUpEvent);
    }
}

某处，

myWebView.setWebViewClient(new AutoPlayVideoWebViewClient());

【讨论】：

非常感谢您节省了我的时间！

【解决方案2】：

首先使用下面的代码：

webSettings.setMediaPlaybackRequiresUserGesture(false);

之后使用以下方法进行加载：

webView.loadDataWithBaseURL("https://www.youtube.com/", HTML.replace("CUSTOM_ID","YOUR_YOUTUBE_VIDEO_ID"), "text/html", "utf-8", null);

在 HTML 字符串中使用 YouTube API 传递下面的代码（替换您的 YouTube 视频 ID）

    <!DOCTYPE html>
<html>
 <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: #000000;
            overflow: hidden;
            position: fixed;
        }
    </style>
<body>

 <div id="player"></div>
<script>
       var tag = document.createElement('script');
       tag.src = "https://www.youtube.com/player_api";
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
       var player;
       function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                    height: '100%',
                    width: '100%',
                    videoId: 'CUSTOM_ID',
                    events: {
                       'onReady': onPlayerReady,
                       'onStateChange': onPlayerStateChange
                  },
                  playerVars: {
                        'autoplay': 0,
                        'showinfo': 1,
                        'controls': 1
                                }
                            });
                        }
                        function onPlayerReady(event) {
                            event.target.playVideo();

                        }

                        var done = false;
                        function onPlayerStateChange(event) {
                            if (event.data == YT.PlayerState.PLAYING && !done) {
                                done = true;
                            }
                        }
                        function stopVideo() {
                            player.stopVideo();
                        }
                    </script> 

</body>
</html>

【讨论】：

谢谢。它真的对我有用。 'playerVars' 似乎是不必要的。

【解决方案3】：

我终于成功了。。您需要使用此 API 在“OnReady”事件中播放视频： https://developers.google.com/youtube/iframe_api_reference#Getting_Started

加载包含此示例代码的页面。

并确保你有

webSettings.setMediaPlaybackRequiresUserGesture(false);

（API 16+）

【讨论】：

酷。所以谷歌提供了一个指南偏好。从来不知道。

【解决方案4】：

您不能在 web 视图上使用 JavaScript 进行自动播放。为了增强用户体验，WebKit 禁用了在移动浏览器上自动播放视频的选项。

【讨论】：

如何启用该选项？

【解决方案5】：

自动播放问题是已知问题，请看我的回答here。

【讨论】：

【解决方案6】：

bonnyz 在他的回答 here 中发布的代码的 C# 版本。以防万一有人需要 Xamarin :) 我测试了它并且它有效。这是我找到的在 web 视图中自动播放 youtube 视频的唯一解决方案。

public class MyWebViewClient : WebViewClient
{
    WebView webView;
    MotionEvent motionEvent, motionEvent2;

    public override void OnPageFinished(WebView view, string url)
    {
        long delta = 100;
        long downTime = SystemClock.UptimeMillis();
        float x = view.Left + view.Width / 2;
        float y = view.Top + view.Height / 2;
        webView = view;

        motionEvent = MotionEvent.Obtain(downTime, downTime + delta, MotionEventActions.Down, x, y, 0);
        motionEvent2 = MotionEvent.Obtain(downTime + delta + 1, downTime + delta * 2, MotionEventActions.Up, x, y, 0);

        int delay = 100;
        view.PostDelayed(TapDown, delay);
        delay += 100;
        view.PostDelayed(TapUp, delay);
    }


    private void TapDown()
    {
        webView.DispatchTouchEvent(motionEvent);
    }

    private void TapUp()
    {
        webView.DispatchTouchEvent(motionEvent2); 
    }
}

使用它：

webView.SetWebViewClient(new MyWebViewClient());

【讨论】：

感谢这个答案，我设法在 Java 中进行了一些关键的调整。见，stackoverflow.com/a/45655979/1157458

【解决方案7】：

增加价值@Dhunju_likes_to_Learn 的回答。按照Thiago的建议处理在 onResume、onPause 和 onDestroy 方法中按下的后退按钮@

@Override
protected void onCreate(Bundle arg0) {
    super.onCreate(arg0);
    setContentView(R.layout.your_layout);
    // Call the AutoPlayVideoWebViewClient class in onCreate method
    myWebView.setWebViewClient(new AutoPlayVideoWebViewClient());
}

写一个私人的

private class AutoPlayVideoWebViewClient extends WebViewClient {

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    // mimic onClick() event on the center of the WebView
    long delta = 100;
    long downTime = SystemClock.uptimeMillis();
    float x = view.getLeft() + (view.getWidth()/2);
    float y = view.getTop() + (view.getHeight()/2);

    MotionEvent tapDownEvent = MotionEvent.obtain(downTime, downTime + delta, MotionEvent.ACTION_DOWN, x, y, 0);
    tapDownEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);
    MotionEvent tapUpEvent = MotionEvent.obtain(downTime, downTime + delta + 2, MotionEvent.ACTION_UP, x, y, 0);
    tapUpEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);

    view.dispatchTouchEvent(tapDownEvent);
    view.dispatchTouchEvent(tapUpEvent);
}
}

@Override
public void onPause() {
    myWebView.onPause();
    myWebView.pauseTimers();
    super.onPause();
}

@Override 
public void onResume() {
    super.onResume();
    myWebView.resumeTimers();
    myWebView.onResume();
}

@Override
protected void onDestroy() {
    myWebView.destroy();
    myWebView = null;
    super.onDestroy();
}

【讨论】：