紫藤背景视频

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 的视频内容页面上按照以下步骤操作。

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

Answer 2

我终于弄明白了。在教程中使用的两个视频中，背景视频（在 Wistia 中）配置了自动播放和循环播放，而叠加视频（出于充分的理由）没有配置。交换它们因此破坏了自动播放，并且由于背景视频无法播放，它看起来根本不起作用（并且叠加视频会在页面加载时自动播放，所以你会尽管看不到视频，但仍可在背景中听到它。

解决方案是在 Wistia 的配置属性中编辑视频以加载背景视频而不加载前景视频，或者使用嵌入 API 在 JavaScript 本身中设置设置所以您不必担心视频的默认设置是什么。

Answer 3

我从来不想要覆盖视频或按钮或任何垃圾 - 我想要的只是背景视频 - 我简化了这段代码，这样它更有意义 - 只需更改 javascript 对象中的 wistiaVideoID 和确保 HTML 中 DIV 上的 id="wistia_q4bmpyxfll" 与其匹配，这一点很重要。还要更改其网站上该 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 background video

html

javascript

video

wistia