Question

我想为自定义数字标牌解决方案开发一个小型android应用。只是显示，绝对没有互动。

内容完全基于网络（带有图像和视频的HTML和CSS模板）。模板元素（背景，文本，形状，图像，视频）及其属性（位置，颜色，字体，不透明度，大小，文件来源等）都保存在数据库中-因此，可视化内容所需的所有信息（用CSS创建HTML ..）可以是JSON数据，该数据可以从远程服务器发送到数字标牌播放器。

我原本打算构建一个Electron应用程序，但是在Raspberry Pi上使用HTML5视频标签和1080p内容时遇到了严重的性能问题。当然，我可以使用功能更强大的设备，例如英特尔NUC，但我首先想尝试Android方法，因为这些设备比NUC便宜。

我到目前为止所拥有的： 我在全屏WebView中显示了index.html，并且能够播放1080p视频-到目前为止效果很好。

现在，我想在从数据库中编写HTML之后动态更改HTML。

我有这个index.html：

<!DOCTYPE html>
<html style="margin:0; padding:0">

<head>
  <meta charset="utf-8">
  <title>Android WebView</title>
</head>

<body style="margin:0; padding:0">
  <script type="text/javascript">
    function changeHtml(html) {
      var containerEl = document.getElementById('container')
      var childEl = document.createElement('div')
      containerEl.innerHTML = ''
      childEl.innerHTML = html
      containerEl.appendChild(childEl)
    }
  </script>
  <div id="container" style="width: 100%; height: 100%"></div>
</body>

</html>

并可以像这样动态更改内容：

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  final WebView myWebView = (WebView) findViewById(R.id.webView);
  myWebView.setWebChromeClient(new WebChromeClient());
  myWebView.getSettings().setJavaScriptEnabled(true);
  myWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
  myWebView.setInitialScale(100);
  myWebView.loadUrl("file:///android_asset/index.html");

  //change HTML dynamically after 3s delay
  new android.os.Handler().postDelayed(
    new Runnable() {
      public void run() {
        myWebView.evaluateJavascript("javascript: changeHtml('<div style=\"color:red\">DYNAMIC TEXT FROM ANDROID</div>')", null);
      }
    }, 3000);
}

可行，内容会动态更改。

因此，从理论上讲，我将查询本地数据库（模板信息已下载到设备中以提供离线支持。）创建一个即将发布的幻灯片/模板数组，并遍历该数组以创建每个幻灯片/模板的动态HTML模板。然后，我将调用validateJavascript函数并更改HTML-WebView应该相应地显示内容。显示的内容将根据每个剪辑的长度每5-10秒更改一次。

这是一种实用的方法吗？

谢谢！

Android WebView动态HTML-最佳做法

0 个答案: