javascript - 如何使我的 wistia 视频播放器/播放列表具有响应能力？

Question

我正在使用带有播放列表的 Wistia 播放器，并试图弄清楚如何使视频播放器具有响应能力？我想根据屏幕尺寸适当调整它的大小。正如这里所见

http://wistia.github.io/demobin/video-foam/

我当前的代码相当简单，并使用他们的 iframe 实现:

<div id="wistia_1n6492l8d4" class="wistia_embed" style="width:947px;height:388px;" data-video-width="640" data-video-height="360">&nbsp;</div>

<script charset="ISO-8859-1" src="http://fast.wistia.com/static/concat/E-v1%2Cplaylist-v1%2Cplaylist-v1-bento%2Csocialbar-v1.js"></script>

<script>
wistiaPlaylist = Wistia.playlist("1n6492l8d4", {
  version: "v1",
  theme: "bento",
  videoOptions: {
    volumeControl: true,
    autoPlay: true,
    videoWidth: 640,
    videoHeight: 360,
    videoFoam: true
  },
  media_0_0: {
    autoPlay: false,
    controlsVisibleOnLoad: false
  },
  plugin: {
    "socialbar-v1": {
      buttons: "twitter-googlePlus-facebook",
      logo: "true",
      badgeUrl: "http://www.mysite.com/mediacenter",
      badgeImage: "http://embed.wistia.com/deliveries/d58d182a894d86aaa3689db801dae4ebcaeca63a.jpg?image_crop_resized=100x20"
    }
  }
});
</script>

它按预期加载播放器...但随后在大约三个增量步骤中，播放器将尺寸缩小到非常非常小...大约 30px x 20px

这几乎就像 iframe 经过多次媒体查询并在加载后缩小尺寸？!不确定……到目前为止还很接近!

谢谢各位帮忙!!!

Answer 1

目前，videoFoam 尚未拨入播放列表 - 我知道这是 Max 想要回去处理的事情，但目前它并不是优先级列表的首位。

为了帮助修复令人难以置信的视频缩小问题，我建议将 videoFoam: true 参数从 videoOptions 对象移至顶级对象:

version: "v1",
  theme: "bento",
  videoFoam: true,
  videoOptions: {
    volumeControl: true,
    autoPlay: true,
    videoWidth: 640,
    videoHeight: 360,
  },
...

请随时联系我们的支持电子邮件:[email protected] ，如果我们能提供进一步的帮助!