Question

我正在尝试复制这个：http://wistia.com/blog/fullscreen-video-homepage 在我的网站上，但即使只使用他们提供的基础演示，也让我陷入困境。如果我只是从该页面下载样本并打开视频，它工作正常，但如果我做任何看似简单的事情，就像用前景视频交换背景视频一样，它会中断，更不用说用我自己的视频替换这些视频了这是我最终的目标。）

这就是我正在做的事情。在javascript中替换它：

overlayVideo: 'fji9juvptr',
overlayVideoDiv: '#wistia_fji9juvptr',
backgroundvideo: 'z1ggfo8f86',
backgroundideoDiv: '#wistia_z1ggfo8f86'

用这个：

overlayVideo: 'z1ggfo8f86',
overlayVideoDiv: '#wistia_z1ggfo8f86',
backgroundvideo: 'fji9juvptr',
backgroundideoDiv: '#wistia_fji9juvptr',

并在HTML中替换它：

<div id="wistia_z1ggfo8f86" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_fji9juvptr" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>

用这个：

<div id="wistia_fji9juvptr" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_z1ggfo8f86" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>

这足以打破它。我的猜测是两个视频的不同之处导致z1ggfo8f86视频作为背景而不是fji9juvptr视频，但我不知道这有什么区别。

我也尝试过更改div的名称（我将“wistia”中的“a”更改为“o”），但这也打破了它，所以我假设这些div名称由Wistia以某种方式处理。

关于我缺少的任何想法？

Answer 1

您的视频的宽高比是否与教程相同？

要仔细检查，请在Wistia中，在您找到视频ID的视频内容页面上按照以下步骤操作。

视频操作＆gt;嵌入式分享＆gt;
选择任何嵌入选项并检查“height”和“”值的代码，并更新 #backgroundVideo 和 #overlayVideo <的样式值/强>

Answer 2

我最终搞清楚了。在他们在教程中使用的两个视频中，背景一个配置（在Wistia中）自动播放和循环，而叠加视频（有充分理由）没有。交换它们因此打破了自动播放，并且由于背景视频无法播放，它似乎根本不起作用（并且叠加视频会在页面加载时自动播放，所以你和＃39;尽管没有可见的视频，但仍在后台听到它。

解决方案是在Wistia配置属性中编辑视频以使背景加载而前景不加载，或者使用Embed API在JavaScript本身中设置设置，这样您就不会我不得不担心视频的默认设置。

Answer 3

我从来不想要叠加视频或按钮或任何垃圾 - 我想要的只是背景视频 - 我简化了这段代码，因此它更有意义 - 只需更改javascript对象中的wistiaVideoID并确保id =＆＃34; wistia_q4bmpyxfll＆＃34;在HTML中的DIV匹配它是重要的。还要在其网站上更改该wistia视频的设置，以便没有声音，自动播放和循环...

    <!doctype html>
<html lang="en">
<head>

<style>
body {
  margin: 0;
  padding: 0;
}

#video_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  opacity: 1;
}
</style>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<div id="video_container">
  <div id="wistia_q4bmpyxfll"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script charset='ISO-8859-1' src='https://fast.wistia.com/assets/external/E-v1.js'></script>
<script charset='ISO-8859-1' src='https://fast.wistia.com/labs/crop-fill/plugin.js'></script>

<script type="text/javascript">

  var fullScreenVideo = {
      wistiaVideoID: 'q4bmpyxfll',
      embedVideo: function(){
        var videoOptions = {};  
        Wistia.obj.merge(videoOptions, {plugin: {cropFill: {src: "//fast.wistia.com/labs/crop-fill/plugin.js"}}});
        wistiaEmbed = Wistia.embed(this.wistiaVideoID, videoOptions);
      },
      fixTextPosition: function(){
        var width = $(window).width();
        var height = $(window).height();
        $("#video_container").css("width", width).css("height", height);
      }     
  };

  $(document).ready(function() {
    fullScreenVideo.fixTextPosition();
  });

  $(window).resize(fullScreenVideo.fixTextPosition);

  fullScreenVideo.embedVideo();

</script>

</body>
</html>

Wistia背景视频

3 个答案: