1

我试图在我的网站上复制这个：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 以某种方式处理的。

关于我所缺少的任何想法？

4

3 回答 3

1

您的视频与教程中的视频长宽比相同吗？

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

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

于 2015-08-11T19:21:06.757 回答
1

我从不想要覆盖视频或按钮或任何垃圾 - 我想要的只是背景视频 - 我简化了这段代码，所以它更有意义 - 只需更改 javascript 对象中的 wistiaVideoID 并确保 id="wistia_q4bmpyxfll" 开启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>
于 2017-04-26T13:37:34.053 回答
0

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

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

于 2015-08-12T20:45:05.257 回答