HTMLVideoElement 不会在 Cordova Android 应用程序上自动播放答案

【问题标题】：HTMLVideoElement won't autoplay on a Cordova Android AppHTMLVideoElement 不会在 Cordova Android 应用程序上自动播放
【发布时间】：2021-04-10 20:22:49
【问题描述】：

我正在开发一个带有 QR 码阅读器的 Cordova 应用程序。它通过使用 WebRTC API 工作。我试图让它自动播放而不需要用户与页面交互。但它只在某些时候有效，大多数时候它不会自动播放，并且会显示带有播放按钮的难看的灰色方块。

这是到目前为止所做的。

视频元素静音，设置为自动播放和内联播放：

const videoElement = document.createElement('video');
videoElement.style.width = `${width}px`;
videoElement.muted = true;
videoElement.playsInline = true;
videoElement.autoplay = true;
return videoElement;

视频开始播放后，play() 方法会在 1 秒后执行：

let Element = $('video')[0];
Element.autoplay = true;

setTimeout(() => { Element.play() }, 1000);

需要用户交互的 Cordova WebView 设置设置为 false。

public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    super.init();
    
    // enable Cordova apps to be started in the background
    Bundle extras = getIntent().getExtras();
    if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
        moveTaskToBack(true);
    }
    
    // Set by <content src="index.html" /> in config.xml
    loadUrl(launchUrl);
    
    WebView webView = (WebView) appView.getEngine().getView();
    WebSettings webSettings = webView.getSettings();
    webSettings.setMediaPlaybackRequiresUserGesture(false); // <-- This is the important part
}

尽管如此，相机流在创建后仍然不会自动播放。

【问题讨论】：

这能回答你的问题吗？ How to get Flowplayer to automatically play in Android WebView?
@Eric 这并非一直有效。我仍然面临我所描述的问题。

标签： android cordova html5-video

【解决方案1】：

在无数次尝试、谷歌搜索和尝试不同的 JS 相机库之后，我可以简单地说在 Cordova 应用程序中始终自动播放视频是不可能的。

但是，仍然有解决方案。但这是完全不同的方法。

您必须模拟屏幕点击。幸运的是，这很容易。

转到您的平台/android/app/src/main/java/您的包/MainActivity.java。
添加以下导入：

    import android.os.SystemClock;
    import android.view.InputDevice;
    import android.view.Menu;
    import android.view.MotionEvent;
    import android.webkit.JavascriptInterface;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;

在 onCreate() 处理程序中添加以下内容：

    webView = (WebView) appView.getEngine().getView();
    WebSettings webSettings = webView.getSettings();
    webSettings.setMediaPlaybackRequiresUserGesture(false);
    webView.addJavascriptInterface(new JSInterface(), "AndroidApp");

将以下类作为嵌套类添加到 MainActivity 类：

    class JSInterface
    {       
        @JavascriptInterface
        public void SimulateScreenTap()
        {
            MainActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run()
                {
                    long delta = 100;
                    long downTime = SystemClock.uptimeMillis();
                    float x = webView.getLeft() + (webView.getWidth() / 2);
                    float y = webView.getTop() + (webView.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);
    
                    webView.dispatchTouchEvent(tapDownEvent);
                    webView.dispatchTouchEvent(tapUpEvent);
                }
            });
        }
    }

现在，当您需要开始播放视频时，只需致电 AndroidApp.SimulateScreenTap()。

【讨论】：

【解决方案2】：

另外，对于开发者来说，还有一个很大的陷阱。

设置 HTMLVideoElement 的 muted 属性将不计为作为 Android WebView 的静音视频。

这不起作用：

videoElement.muted = true;

您必须添加muted=true 属性。

这是正确的方法：

videoElement.setAttribute('muted', true);

【讨论】：