Ziggeo视频 - 如何做出响应?

时间:2017-04-30 06:46:56

标签: javascript html css ziggeo-sdk

我一直在尝试这么多东西来让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%宽度?

谢谢

2 个答案:

答案 0 :(得分: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基于闪存和JWPlayer,而v2是由Ziggeo自下而上编写的,并且在移动响应方面要好得多。

它的相同代码如下所示:

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

或者,使用v2,你也可以做一些很酷的事情,如下所示:

<ziggeoplayer
    ziggeo-video="_sample_video"
    style="width:100%; height:100%">
</ziggeoplayer>
  • 代码将忽略您添加的附加参数,以便样式属性保留在那里。

记录器看起来很相似,使用<ziggeorecorder>代替<ziggeoplayer>,它也支持响应参数。

我个人建议使用自适应选项并使用样式或类等为代码添加其他格式。

PS:您提到的页面(https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods)右上角有一个下拉列表,可以帮助您将v1切换到v2,反之亦然。

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

答案 1 :(得分:0)

尝试一下:

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

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