尝试在 PhoneGap/Cordova 应用程序中自动播放 YouTube 视频答案

【问题标题】：Trying to autoplay YouTube video in a PhoneGap/Cordova app尝试在 PhoneGap/Cordova 应用程序中自动播放 YouTube 视频
【发布时间】：2015-11-25 01:44:54
【问题描述】：

我正在使用PhoneGap 开发应用程序。所以，它是一个网络应用程序。在这个应用程序中，我需要嵌入一个 YouTube 视频并在用户导航到该特定页面时自动播放它。

我了解到，由于带宽问题，HTML5 视频自动播放无法在移动设备上运行。我的问题是，有没有任何方法可以绕过这个限制？我不介意复杂的解决方法或黑客可以让我这样做。什么都可以。

谢谢。

【问题讨论】：

您尝试过建议的解决方案吗？

标签： android ios html cordova youtube

【解决方案1】：

有一个cordova/phonegap plugin 承诺这样做。它依赖于 API 级别 17 (Android 4.2) 中添加的 Webview 方法 setMediaPlaybackRequiresUserGesture。

它只是在 webview 上调用这个方法：

WebView view = getWebViewFromPlugin();
view.getSettings().setMediaPlaybackRequiresUserGesture(false);

phongap build 也可以使用。

【讨论】：

【解决方案2】：

正如您自己指出的那样，代码本身中的所有自动播放指令都将在加载时被忽略。所以我们将实现一个函数，获取正文中的视频并开始播放。

以下 javascript 代码可以做到这一点：

(function() {
    document.getElementsByTagName('video')[0].play();
})()

要在页面加载后执行这段代码，我们需要设置一个WebViewClient并实现onPageFinished()

webview.setWebViewClient(new CordovaWebViewClient(this, webview) {
            // autoplay when finished loading via javascript injection
            public void onPageFinished(WebView view, String url) { webview.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); }
});

final WebSettings settings = webview.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    settings.setPluginState(WebSettings.PluginState.ON);

A full example:

    webview = new CordovaWebView(this);
    setContentView(webview);

    final WebSettings settings = webview.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    settings.setPluginState(WebSettings.PluginState.ON);

    webview.setWebViewClient(new CordovaWebViewClient() {
        // autoplay when finished loading via javascript injection
        public void onPageFinished(WebView view, String url) { webview.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); }
    });

    webview.loadUrl("http://html5demos.com/video");

【讨论】：