如何让 Flowplayer 在 Android WebView 中自动播放？答案

【问题标题】：How to get Flowplayer to automatically play in Android WebView?如何让 Flowplayer 在 Android WebView 中自动播放？
【发布时间】：2014-03-28 06:53:08
【问题描述】：

我无法让 Flowplayer 在 Android 上的 WebView 中自动播放视频。如果按下 HTML 内播放按钮，视频可以正常播放，但不会自行启动。这似乎与 Chrome 相关，因为自动播放在 Android Chrome 浏览器中也不起作用。它可以在现有的 Android 浏览器和用于 (Linux) 桌面的 Chrome 中运行。

我看到this page 建议添加一个 WEBM 文件以使 MP4 内容正常工作，但它没有帮助。我还看到 this page 提到使用新设置 setMediaPlaybackRequiresUserGesture()，但这也没有帮助。

有没有人在 Android WebView 中使用自动播放功能？

这是我的测试代码，可将应用程序提炼为基本要素。

package com.example.testautovideo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

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

        webview.setWebChromeClient(new WebChromeClient());
        webview.getSettings().setJavaScriptEnabled(true);

        webview.getSettings().setLoadsImagesAutomatically(true);
        // webview.getSettings().setMediaPlaybackRequiresUserGesture(false);  // didn't help
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });

        webview.loadUrl(THE_URL);
    }
}

这是我网页的来源。 Flowplayer 和 jQuery 调用适用于标准安装。 Flowplayer 库是最新的免费版本； jQuery 库是最新的生产版本。

<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,target-densitydpi=device-dpi'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="ws:skip" value="false" />
<title>Autoplay Test</title>
<link rel="stylesheet" type="text/css" href="src/js/flowplayer/skin/minimalist.css">
<script type="text/javascript" src="src/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/js/flowplayer/flowplayer.min.js"></script>

<script>
$(document).ready(function(){
    function playVideo(){
        var player = flowplayer($('#theVideo'));
        player.play();
    }
    setTimeout(playVideo,10);
});
</script>

<style>
body {
    margin:0;
    padding:0;
    background:#000;
}

#wrapper .flowplayer {
    width:640px;
    height:360px;
}

#wrapper {
    width:640px;
    height:360px;
    background:#000;
    margin:30px auto;
}
</style>
</head>

<body>
<div id="wrapper">
    <div class="flowplayer" id="theVideo">
        <video preload="none" autoplay>
            <source type="video/webm" src="video_1.webm">
            <source type="video/mp4" src="video_1.mp4">
        </video>
    </div>
</div>
</body>
</html>

我知道链接可能会过时，但这里是该网页的a copy，其中安装了正常工作的 Flowplayer 和 jQuery。

【问题讨论】：

标签： android jquery android-webview flowplayer

【解决方案1】：

以下方法适用于所有版本的 Android，直至 Honeycomb (API 11)，甚至可能更早。重要的部分是通过 JavaScript 在视频上动态运行 load() 和 play()。即便如此，它并不总是适用于旧版本的 Android（在 API 17 中添加的 setMediaPlaybackRequiresUserGesture() 调用已被删除。

WebView 拒绝让加载/播放自动开始，但它会让 Android 应用程序启动它。希望页面本身能够确定视频何时开始，而不是应用程序。

为了让这一切正常工作，我们采取了以下措施。首先，围绕setMediaPlaybackRequiresUserGesture() 调用设置了一个保护条件，以防止它在Jellybean MR1 之前的设备上运行。然后添加并启用了一个小的单方法 JavascriptInterface 类。该方法调用加载和播放页面视频的页面 JavaScript 方法。最后，网页被修改为在视频应该开始时调用暴露的方法。在下面的代码中，当页面加载完成并且视频设置为连续循环时调用该方法。

是的，启用 JavascriptInterface 类存在一个已知的安全问题，但我们的只有一个方法，并且该方法除了回调调用 JavaScipt 之外没有任何作用。

应用的相关部分：

{    
    ...

    webView = (WebView) findViewById(id.web);
    webView.setWebChromeClient(new WebChromeClient());
    webView.getSettings().setJavaScriptEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
        webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

    webView.addJavascriptInterface(new JsInterface(), "AndroidApp");
}

class JsInterface {
    @JavascriptInterface
    public void startVideo() {
        Log.v(TAG, "in JsInterface.startVideo()");
        MainActivity.this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Log.v(TAG, "in JsInterface.startVideo.run");
                webView.loadUrl("javascript:playVideo()");
            }
        });
    }
}

网页：

<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,target-densitydpi=device-dpi'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Autoplay Test</title>
<link rel="stylesheet" type="text/css" href="src/js/flowplayer/skin/minimalist.css">
<script type="text/javascript" src="src/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/js/flowplayer/flowplayer.min.js"></script>    
<script type="text/javascript">

function playVideo(){
    var player = flowplayer($('#theVideo'));
    player.load('video_1.mp4');
    player.bind("finish", function() {
        player.play();
    });
}

$(document).ready(function(){    
    AndroidApp.startVideo()    
});
</script>

<style>
body {
    margin:0;
    padding:0;
    background:#000;
}

#wrapper .flowplayer {
    width:640px;
    height:360px;
}

#wrapper {
    width:640px;
    height:360px;
    background:#000;
    margin:30px auto;
}
</style>
</head>

<body>
    <div id="wrapper">
        <div class="flowplayer is-splash" id="theVideo">
            <video preload="none">
                <source type="video/mp4" src="">
            </video>
        </div>
    </div>
</body>
</html>

【讨论】：

这种方法也适用于默认的 HTML5 嵌入和可能的其他嵌入技术。
如果其他人遇到此问题，必须开启视频加速！我没有意识到我所包含的行，因为有人说有必要使 webclient 背景透明 (mWebView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);) 正在禁用视频加速，因此使视频不可见（我解释因为它没有播放，我的没有音频）。

【解决方案2】：

您肯定需要致电setMediaPlaybackRequiresUserGesture(false) 才能使其正常工作。我无法立即看到您的 HTML 存在问题，如果您使用 javascript 从 onload 处理程序的视频元素上调用 play() 是否有效，比如说？

Chrome for Android 不支持自动播放的预期行为。但是当 setMediaPlaybackRequiresUserGesture 为 false 时，它应该在 WebView 中工作。

【讨论】：

感谢您的回复。使用 setMediaPlaybackRequiresUserGesture(false) 似乎没有任何区别。我让我们的网络人员尝试从 onload 处理程序中调用 play()。
好的，请告诉我你的进展如何。您是否在 logcat 中看到任何可能指示错误的消息？如果您运行的是 Android 4.4，您可以尝试使用 Chrome 开发工具调试 WebView 以查看您的 javascript 等是否有任何问题。
虽然您的回答并没有真正解决我们的问题，但它确实为我们指明了正确的方向 --> +1。

【解决方案3】：

即使使用 setMediaPlaybackRequiresUserGesture，我也无法让它工作。

所以我所做的是对网页的简单 javascript 调用。

public void triggerPlayVideo()
{

activity.runOnUiThread(new Runnable() {

          @Override
          public void run()
          {
              webView.loadUrl("javascript:playVideo()");
          }

      }

  );  }

一旦我从 webview 收到页面已加载/视频已加载的事件，就会触发此方法。

【讨论】：