首页 文章

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

提问于
浏览 次
4

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

我见过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

3 回答

  • 4

    以下是适用于所有Android版本的方法，适用于Honeycomb（API 11），也许更早 . 重要的是通过JavaScript在视频上动态运行load（）和play（） . 即便如此，它并不总是适用于旧版本的Android（删除了API 17中添加的 setMediaPlaybackRequiresUserGesture() 调用 .

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

    这是为了让一切顺利完成所做的工作 . 首先，围绕 setMediaPlaybackRequiresUserGesture() 呼叫设置了一个保护条件，以防止它在Jellybean MR1之前的设备上运行 . 然后添加并启用了一个小的单方法JavascriptInterface类 . 该方法调用一个页面JavaScript方法来加载和播放页面的视频 . 最后，改变网页以在应该启动视频时调用公开的方法 . 在下面的代码中，当页面加载完毕并且视频设置为连续循环时，将调用该方法 .

    Yes, there's a known security concern with enabling a JavascriptInterface class, but our's only has a single method and that method doesn't do anything other than call back into the calling 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>
    回复于
  • 0

    你肯定需要调用 setMediaPlaybackRequiresUserGesture(false) 才能使它工作 . 我不能马上看到你的HTML有问题，如果你使用javascript从 onload 处理程序调用 play() 视频元素，它会起作用吗？

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

    回复于
  • 2

    即使使用setMediaPlaybackRequiresUserGesture，我也无法使其工作 .

    所以我所做的是对网页的一个简单的javascript调用 .

    public void triggerPlayVideo（）{activity.runOnUiThread（new Runnable（）{@Override
    public void run（）
    {
    webView.loadUrl（ “JavaScript的：的playVideo（）”）;
    }

    }

    ）; }

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

    回复于

相关问题