个人中心
gpt4 book ai didi

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

转载 作者：塔克拉玛干 更新时间：2023-11-03 00:38:12 27 4
gpt4 key购买 nike

我无法让 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，包括 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>

关于android - 如何让Flowplayer在Android WebView中自动播放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22706111/

27 4 0
文章推荐： android - 如何确定 Android .so 文件的 ABI(即 armeabi 或 armeabi-v7a)？
文章推荐： android - 如何从他的号码中获取联系人的姓名
文章推荐： android - ListView 项目背景颜色在滚动时发生变化，
文章推荐： c++ - GCC 错误 - 在 constexpr 中输入/递减数组访问
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com