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

Question

我正在开发一个 Cordova 应用程序，它有一个二维码 reader。它通过使用 WebRTC API 来工作。我试图让它在不需要用户与页面交互的情况下自动播放。但它只是有时有效，大多数时候它不会自动播放并显示带有播放按钮的难看的灰色方块。

这是到目前为止所做的。

视频元素 muted，设置为 autoplay 和 play inline:

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
}

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

Answer 1

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

不过，还是有解决办法的。但这是完全不同的方法。

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

前往您的platforms/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");

将以下 class 作为 嵌套 class 添加到 MainActivity class:

    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()。

Answer 2

另外，对于开发者来说也是一个很大的陷阱

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

这不行:

videoElement.muted = true;

您必须添加 muted=true 属性。

这才是正确的做法:

videoElement.setAttribute('muted', true);

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

HTMLVideoElement won't autoplay on a Cordova Android App

android

html5-video

cordova