我正在尝试复制这个: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 以某种方式处理的。
关于我遗漏的任何想法？
最佳答案
我从不想要覆盖视频或按钮或任何垃圾 - 我想要的只是背景视频 - 我简化了这段代码以便它更有意义 - 只需更改 javascript 对象中的 wistiaVideoID 并确保 id="HTML 中 DIV 上的 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>
关于javascript - 紫藤背景视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31835577/