如何让 Flowplayer 在 Android WebView 中自动播放? [英] How to get Flowplayer to automatically play in Android WebView?

查看：54
本文介绍了如何让 Flowplayer 在 Android WebView 中自动播放?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我已经看到 这个页面 建议添加一个 WEBM 文件来获取 MP4内容工作，但它没有帮助.我也看过这个页面 提到使用新设置 setMediaPlaybackRequiresUserGesture()，但这也无济于事.

有人在 Android WebView 中使用自动播放功能吗?

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

package com.example.testautovideo;导入 android.annotation.SuppressLint;导入 android.app.Activity;导入 android.os.Bundle;导入 android.webkit.WebChromeClient;导入 android.webkit.WebView;导入 android.webkit.WebViewClient;公共类 MainActivity 扩展 Activity {@SuppressLint("SetJavaScriptEnabled")@覆盖protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);WebView webview = new WebView(this);设置内容视图(网络视图)；webview.setWebChromeClient(new WebChromeClient());webview.getSettings().setJavaScriptEnabled(true);webview.getSettings().setLoadsImagesAutomatically(true);//webview.getSettings().setMediaPlaybackRequiresUserGesture(false);//没有帮助webview.setWebViewClient(new WebViewClient() {@覆盖public boolean shouldOverrideUrlLoading(WebView view, String url) {返回假；}});webview.loadUrl(THE_URL);}}

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

<头><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>自动播放测试</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><脚本>$(document).ready(function(){功能播放视频(){var player = flowplayer($('#theVideo'));播放器播放()；}设置超时(播放视频，10)；});<风格>身体 {保证金:0;填充:0;背景:#000；}#wrapper .flowplayer {宽度:640px；高度:360px；}#包装{宽度:640px；高度:360px；背景:#000；边距:30px 自动；}</风格><身体><div id="包装器"><div class="flowplayer" id="theVideo"><video preload="none" 自动播放><source type="video/webm" src="video_1.webm"><source type="video/mp4" src="video_1.mp4"></视频>

</html>

我知道链接可能会失效，但这里是该网页的副本使用 Flowplayer 和 jQuery 安装.

解决方案

以下是适用于所有 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");}类 JsInterface {@JavascriptInterface公共无效开始视频(){Log.v(TAG, "在 JsInterface.startVideo()");MainActivity.this.runOnUiThread(new Runnable() {@覆盖公共无效运行(){Log.v(TAG, "在 JsInterface.startVideo.run");webView.loadUrl("javascript:playVideo()");}});}}

网页:

<头><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>自动播放测试</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">功能播放视频(){var player = flowplayer($('#theVideo'));player.load('video_1.mp4');player.bind(完成"，函数(){播放器播放()；});}$(document).ready(function(){AndroidApp.startVideo()});<风格>身体 {保证金:0;填充:0;背景:#000；}#wrapper .flowplayer {宽度:640px；高度:360px；}#包装{宽度:640px；高度:360px；背景:#000；边距:30px 自动；}</风格><身体><div id="包装器"><div class="flowplayer is-splash" id="theVideo"><视频预加载="无"><source type="video/mp4" src=""></视频>

</html>

I can't get Flowplayer to automatically play video in a WebView on Android. The video plays fine if the in-HTML play button is pressed, but it won't start by itself. This seems to be Chrome-related since autoplay doesn't work in the Android Chrome browser either. It does work in the stock Android browser and in Chrome for the (Linux) desktop.

I've seen this page that suggests adding a WEBM file to get MP4 content to work, but it didn't help. I've also seen this page that mentions using the new setting setMediaPlaybackRequiresUserGesture(), but that didn't help either.

Has anyone gotten autoplay to work in an Android WebView?

Here is my test code that distills the app down to its essentials.

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);
    }
}

Here is the source of my web page. The Flowplayer and jQuery calls are to standard installs. The Flowplayer library is the latest free version; the jQuery library is the latest production version.

<!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>

I know links can go stale, but here's a copy of that web page with working Flowplayer and jQuery installs.

解决方案

The following is an approach that works on all versions of Android down to Honeycomb (API 11), and perhaps earlier. The important part is to dynamically run load() and play() on the video via JavaScript. Even then, it doesn't always work on older versions of Android (with the setMediaPlaybackRequiresUserGesture() call, which was added in API 17, removed.

The WebView refuses to let the load/play start automatically, but it will let the Android app initiate it. It's desirable for the page itself to be able to determine when the video is started, rather than the app.

Here's what was done to get it all to work. First, a guard condition was put around around the setMediaPlaybackRequiresUserGesture() call to keep it from being run on pre-Jellybean MR1 devices. Then a small, single-method JavascriptInterface class was added and enabled. That method calls an on-page JavaScript method that loads and plays the page's video. Finally, the web pages were altered to call the exposed method when the video should be started. In the code below, the method is called when page has finished loading and the video is set to loop continuously.

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.

The relevant parts of the app:

{    
    ...

    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()");
            }
        });
    }
}

The web page:

<!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>

这篇关于如何让 Flowplayer 在 Android WebView 中自动播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆