如何创建背景视频的第3部分

05年1月

将视频添加到Adobe Muse

背景视频很容易添加在缪斯感谢免费的部件。

Adobe Muse的一个非常有趣的方面是,它允许您使用与用于布置出版物的布局类似的工作流程来创建网页。 您不需要深入了解构建网站或页面的代码,但熟悉HTML5,CSS和JavaScript就不会受到伤害。

虽然传统的网络视频通常是通过使用HTML5 Video API添加的,但Adobe Muse通过它所称的“小部件”来实现相同的功能。 小部件创建特定任务所需的HTML 5,但在Muse中使用纯文本界面在页面发布时编写代码。

在本练习中,我们将使用一个小部件,您可以从Muse Resources免费下载这个小部件。 当小部件下载时,您只需打开.zip文件,然后双击全屏视频文件夹中的.mulib文件。 这会将它安装到您的Adobe Muse的副本中。

05年05月

如何在Adobe Muse CC中为背景视频准备页面

我们首先创建一个新网站并设置页面尺寸。

安装小部件后,您现在可以创建将使用该视频的页面。

在开始之前,为您的Muse网站创建一个文件夹。 在该文件夹内创建另一个文件夹 - 我使用“ 媒体 ” - 并将您的mp4和webm版本的视频移动到该文件夹​​中。

当您启动Muse时,请选择File> New Site 。 当布局对话框打开时,选择Desktop作为初始布局 ,并将页面宽度页面高度值更改为1200900 。 点击确定

在平面视图中双击主页面以打开母版页面。 当主页面打开时,将页眉和页脚指南移动到页面的顶部和底部。 这个例子你确实不需要页眉和页脚。

05年3月

如何在Adobe Muse CC中使用全屏幕背景视频小部件

所有你需要做的就是添加视频名称,让小部件处理剩下的部分。

使用小部件非常简单。 您需要做的第一件事是通过选择视图>计划模式返回到计划视图。 当计划视图打开时,双击主页打开它。

打开“库”面板 - 如果它未在界面右侧打开,请选择“ 窗口”>“库” ,然后向下旋转[MR]全屏幕背景视频文件夹。 将小部件拖到该页面的文件夹中。

您会注意到选项会要求您输入视频的mp4和webm版本的名称。 请输入与放置它们的文件夹拼写完全相同的名称。 确保不出错的一个小技巧是复制mp4视频的名称并将其粘贴到选项菜单MP4WEBM区域。

另一个诀窍:所有这个小部件都是为你编写HTML 5代码。 你可以告诉这个,因为你在widget中看到<> 。 在这种情况下,您可以将该部件从网页上放到粘贴板上,它仍然可以工作。 这样它就不会干扰您将放置在页面上的任何内容。

04年05月

如何在Adobe Muse CC中添加视频和测试页面

当您测试网站或网页时,视频会播放。

尽管您已经添加了播放视频的代码,但Muse仍然不知道这些视频的位置。 要解决此问题,请选择文件>添加上传文件 。 当“ 上传”对话框打开时,导航至包含视频的文件夹,选择它们并单击“ 打开” 。 为确保他们已上传,请打开“ 资源”面板 ,您应看到两个视频。 把它们留在面板中。 他们不需要放在页面上。

要测试项目,请选择文件>在浏览器中预览页面,或者因为这是一个页面,所以文件>浏览器中的预览站点 。 您的默认浏览器将打开,视频 - 在我的情况下是热带暴雨 - 将开始播放。

此时,您可以将Muse文件视为常规网页,并将内容添加到主页,并且视频将在其下面播放。

05年05月

如何在Adobe Muse CC中添加视频海报框架

总是添加一个海报框架到任何视频项目。

这是我们在这里讨论的网络,根据连接速度的不同,您的用户很可能会打开页面并在视频加载时盯着空白屏幕。 这不是一件好事。 以下是如何处理这种尴尬。

这是一个“最佳实践”,包括视频的海报框架,视频加载时会出现。 这通常是视频中一帧的全尺寸屏幕截图。

要添加海报框,请在页面顶部的浏览器填充上单击一次。 点击图片链接并导航到要使用的图片。 在拟合区域中,选择缩放填充 ,然后单击位置区域中的中心点 。 这将确保在浏览器的视口大小更改时,图像始终会从图像的中心缩放。 您还将看到图像填充页面。

另一个小窍门是至少有一个坚实的不是白色填充颜色,以防海报框架需要一段时间才能出现。 要执行此操作,请单击颜色芯片以打开Muse颜色选择器。 选择吸管工具并单击图像中的主要颜色。 完成后,单击页面关闭浏览器填充对话框。

此时,您可以保存该项目或将其发布。

本系列的最后一部分向您展示了如何编写将视频幻灯片放入网页背景的HTML5代码。