Fatal编程技术网

Javascript 紫藤背景视频

javascript html video

Javascript 紫藤背景视频,javascript,html,video,wistia,Javascript,Html,Video,Wistia,我试图复制这一点： 在我的网站上，即使只使用他们提供的基本演示，也会让我遇到问题。如果我只是从该页面下载示例并打开视频，效果会很好，但如果我做了任何看似简单的事情，比如将背景视频与前景视频交换，它就会崩溃，更不用说用我自己的视频替换这些视频了（这是我的最终目标） 这是我正在做的。 在javascript中替换此选项： overlayVideo: 'fji9juvptr', overlayVideoDiv: '#wistia_fji9juvptr', backgroundvideo: 'z1ggf

我试图复制这一点： 在我的网站上，即使只使用他们提供的基本演示，也会让我遇到问题。如果我只是从该页面下载示例并打开视频，效果会很好，但如果我做了任何看似简单的事情，比如将背景视频与前景视频交换，它就会崩溃，更不用说用我自己的视频替换这些视频了（这是我的最终目标）

这是我正在做的。 在javascript中替换此选项：

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

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

<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>
并将其替换为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>
为此：

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

<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>
这足以打破它。我猜这两个视频有些不同，导致Z1GFO8F86视频用作背景，但fji9juvptr视频不起作用，但我说不出有什么不同

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

关于我遗漏的内容有什么想法吗？

你的视频的纵横比与教程中的视频相同吗

要再次检查，请在Witia中找到视频ID的视频内容页面上执行以下步骤

视频操作>嵌入和共享>
选择任何嵌入选项并检查代码中的“
高度”和“
”值，然后更新#backgroundVideo和#overlyvideo的样式值，我最终发现了这一点。
在他们在教程中使用的两个视频中，背景视频（在Witia中）配置了自动播放和循环，而覆盖视频（出于充分的理由）没有。因此，交换它们会破坏自动播放，而且由于背景视频无法播放，因此它看起来根本不起作用（而且当加载页面时，覆盖视频会自动播放，因此即使没有视频可见，您也会在背景中听到它


解决方案是在Witia的配置属性中编辑视频，使其后台加载而前台不加载，或者使用嵌入API在JavaScript本身中设置设置，这样您就不必担心视频的默认设置是什么。
我从来都不想要覆盖视频或按钮或任何垃圾e-我想要的只是背景视频-我简化了这段代码，使其更有意义-只需更改javascript对象中的wistiaVideoID，并确保id=“wistia_q4bmpyxfll”在HTML中的DIV上匹配它，这很重要。同时在他们的网站上更改Witia视频的设置，这样就没有声音、自动播放和循环


    <!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>




身体{
保证金：0；
填充：0；
}
#视频容器{
宽度：100%；
身高：100%；
溢出：隐藏；
位置：相对位置；
z指数：1；
不透明度：1；
}
var fullScreenVideo={
wistiaVideoID:'q4bmpyxfll'，
嵌入视频：函数（）{
var videoOptions={}；
合并（videoOptions，{plugin:{cropFill:{src://fast.Wistia.com/labs/crop fill/plugin.js“}}}）；
wistiaEmbed=Wistia.embed（this.wistiaVideoID，videoOptions）；
},
fixTextPosition:函数（）{
变量宽度=$（窗口）.width（）；
var height=$（window.height（）；
$（“视频容器”）.css（“宽度”，宽度）.css（“高度”，高度）；
}     
};
$（文档）.ready（函数（）{
fullScreenVideo.fixtPosition（）；
});
$（窗口）。调整大小（fullScreenVideo.fixTextPosition）；
fullScreenVideo.embeddevideo（）；

Nah，我要使用的视频是不同的纵横比。但我想出来了，现在就要发布答案了。好主意！错误的纵横比肯定会导致视频拉伸。