Ziggeo 视频 - 如何做出响应？

Posted 2023-03-15

【中文标题】Ziggeo 视频 - 如何做出响应？

【英文标题】：Ziggeo video - How to make responsive?

【发布时间】：2017-04-30 06:46:56

【问题描述】：

我一直在尝试很多方法来使 Ziggeo 视频具有响应性。但我看到的只是固定宽度。我需要的是 Ziggeo 具有 100% 的宽度并在各种移动设备上正确查看。

这是示例代码：

<ziggeo
  ziggeo-video="_sample_video"
  ziggeo-width=320
  ziggeo-height=240>
</ziggeo>

宽度和高度以像素为单位指定，我似乎无法设置百分比。

示例链接：https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v1

请问有人知道如何通过 CSS、html 或 JavaScript 使 Ziggeo 适合 100% 宽度吗？

谢谢

【问题讨论】：

请分享您现有的代码。

分享您的代码或演示链接

谢谢 - 我已经用代码和链接更新了我的问题。

如果他们回复，我会联系 Ziggeo 技术支持并在此处发布解决方案。

【参考方案1】：

其实有响应式参数-https://ziggeo.com/docs/sdks/javascript/browser-integration/parameters#javascript-revision=v1-stable&javascript-version=v1

它看起来像：

<ziggeo
    ziggeo-video="_sample_video"
    ziggeo-responsive>
</ziggeo>

我确实建议检查播放器和录音机的 v2 版本，而不是上面代码所针对的 v1。不同之处在于 v1 基于 flash 和 JWPlayer，而 v2 是 Ziggeo 自下而上编写的，在移动响应方面要好得多。

相同的代码如下所示：

<ziggeoplayer
    ziggeo-video="_sample_video"
    ziggeo-responsive>
</ziggeoplayer>

或者，使用 v2，您还可以做一些很酷的事情，例如：

<ziggeoplayer
    ziggeo-video="_sample_video"
    style="width:100%; height:100%">
</ziggeoplayer>

代码将忽略您添加的附加参数，因此样式属性将保留在那里。

Recorder 看起来很相似，使用 <ziggeorecorder> 而不是 <ziggeoplayer>，它也支持响应参数。

我个人确实建议使用响应式选项并使用样式或类等来为您的代码添加额外的格式。

PS：您提到的页面（https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods）在右上角有一个下拉菜单，可以帮助您将 v1 切换到 v2，反之亦然。

更新（发布后）： - 值得一提的是，有一些特定于浏览器的样式可以使某些元素应用额外的填充和边距，以及您自己的 CSS 代码，所以如果您看到它周围有一些空白，最好检查一下是否有是需要添加/更改的任何 CSS 代码，还是需要重置的 CSS。

【讨论】：

谢谢贝恩。我非常感谢 Ziggeo 支持以及您回复的速度。感谢您在版本 1 中添加 Ziggeo-Responsive 标志。它并没有像我希望的那样工作，但我会更改我的代码以使用版本 2，它看起来可以很好地处理响应。一旦我进入它，我会在这里报告，但肯定 Ziggeo-Responsive 结合版本 2 将解决我的问题。再次感谢。

我可以确认使用 V2 解决了我的响应问题。干得好！ “ziggeo-responsive”在 V1 上运行不佳，但在 V2 上运行良好。使用 V2，此代码有效：<ziggeoplayer ziggeo-video="_sample_video" ziggeo-responsive> </ziggeoplayer>

v1 实际上不像使用 JWPlayer 和 Flash 那样对移动设备友好，而 v2 是优先考虑移动设备构建的，因此性能要好得多，而且未来明智的 v2 将是最好的选择因为它具有所有很酷的功能:)

谢谢。最后，我通过使用 Ziggeo V2 和新的“响应式”标志实现了我想要的。并使用了 2 个组件：ZiggeoPlayer 和 ZiggeoRecorder，在不需要时隐藏每个组件。一切都很好。

【参考方案2】：

试试这个：

$( window ).resize(function() 
  var height = window.innerHeight;
  var width = window.innerWidth;
  $('#videoElementId').prop('ziggeo-width', width);
  $('#videoElementId').prop('ziggeo-height', height);
);

我确信 Ziggeo 中有一个 API 可以帮助您在不设置属性的情况下执行此操作，但上面的代码应该可以帮助您入门。

【讨论】：

谢谢。当控件呈现时，它实际上删除了“ziggeo”标签并用几十行 HTML 替换它。我已经尝试过 API，但将宽度设置为 100% 不起作用。如果他们回复，我将联系 Ziggeo 技术支持并在此处发布解决方案。