我们如何克服 UiWebView/iOS Safari 上 HTML5 视频缺少的静音/音量属性？

Posted 2023-02-23

【中文标题】我们如何克服 UiWebView/iOS Safari 上 HTML5 视频缺少的静音/音量属性？

【英文标题】：How can we overcome the missing muted/volume property on HTML5 video on UiWebView/iOS Safari?

【发布时间】：2015-06-30 14:35:09

【问题描述】：

正如许多混合应用程序开发人员所知，Apple 已决定禁止在 javascript 中设置 html5 视频元素的音量属性。这也相当于 muted 属性。静音视频的概念在滚动到视图时自动播放，并且可以选择取消静音，这一概念越来越受欢迎（由 Vine、Facebook 等率先推出）。我试图找到一种方法来解决这个设计限制。从我能读到的关于这个主题的内容来看，没有任何黑客或解决方案可以解决我的这个设计要求。

到目前为止，这是我的想法：

我可以将视频中的音频拆分为单独的流，并在用户点击时将当前时间与视频同步并调用 play()。但是，ios Safari/UiWebView 不支持同步音频/视频流。因此，这根本不是一种选择。

我可以对两个视频进行编码，一个有声音，一个没有。然后我可以随时交换 src。但是，这需要重新加载整个流，并且所需的数据量也几乎翻了一番。延迟很明显。因此，这不是一个可行的解决方案。

我可以在 web 视图中嵌入原生 AVPlayer 类元素。但是，这将是一个覆盖，并且无法从 web 视图中进行管理。来自 dom 的自定义控件和 UI 交互是不可能的。因此，这不是一个选择。

我可以简单地禁用应用程序的输出，并在用户点击视频元素时动态地打开它。但是，据我所知，这是不可能的。我可以展示本机软件音量滑块，但这会破坏整个事情的目的。

您对这个限制有什么建议或方法吗？

【参考方案1】：

我设法找到了一个可接受的解决方案。我将视频分成三个文件。一种不带音频，一种不带视频，然后一种为桌面浏览器/android 提供视频和音频。

似乎运行同步流只要它们不相互冲突就可以工作，这基本上意味着单独的音轨和没有音频通道的视频可以很好地协调播放。