我们新视频主页背后的代码

nabila583

们的主页经常变化一次迭代包括一个全屏视频背景和一个号召性用语来观看全屏视频。 我们真的很想炫耀我们的产品并将视频放在首位和中心位置，因为它对我们作为一家视频公司来说非常重要。 在这篇文章中我们将展示如何使用 托管的视频实现相同的全屏效果，以及使用像这样的背景视频时需要注意的一些注意事项。 警告您现在正在进入实验领域。 这篇文章旨在为希望使用 尝试新事物的开发人员提供示例。我们希望它能有所帮助，但如果出现问题我们将无法围绕该实验内容提供支持。如果您遇到问题请寻求有经验的开发人员的帮助想要自己做一些实验查看我们的开发者文档！ 我们主页的代码与您创建的任何其他网页的代码非常相似。

它是一系列相互叠加的 元素带有一点 的魔力。在访问者访问期间主页可以处于三种不同的状态。 当访问者首次加载页面时我们会尝试尽快加载所有资产。由于视频不会立即加载我们首先加载 俄罗斯手机号 视频缩略图，以便访问者可以看到一些内容。一个简单的图像文件可以比完整的视频嵌入更快地加载到页面上。您可以在下图中看到一个示例。绿色区域是透明的，因此在第一个状态下访问者看不到背景视频或叠加视频，因为视频缩略图挡住了他们的视线。这让我们有时间加载视频然后进入状态二。 在状态二中，我们切换背景视频和视频缩略图的位置。一旦视频切换到缩略图前面我们就开始播放视频。这会产生视频在加载期间暂停的效果。



如果没有这两个步骤我们的访问者在视频加载之前只会看到白色背景。 在状态三中访问者点击了播放按钮我们将叠加视频置于堆栈的前面。这会阻止文本和播放按钮的视图，并且只能查看叠加视频。当访问者退出视频时，页面返回到状态二。 现在我们已经概述了我们的页面可以处于的不同状态，让我们来谈谈您需要的代码来实现这一点。设置配置您的嵌入 首先，您需要在您的 Wistia 帐户中创建一个新项目。上传一个没有声音的视频作为背景视频。在 部分，启用最后将视频行为设置为。 您需要的第二个视频是叠加视频当您的访问者单击播放按钮时该视频就会出现。叠加视频不需要任何特殊定制。 在 Wistia 中您需要处理的第二个任务是记下您的视。