如何使用Adobe Muse添加背景视频

要知道的内容

  • 与之页面计划查看,去窗户>图书馆>[MR]全屏背景视频文件夹并将窗口小部件拖动到页面。
  • 添加视频,转到文件>添加上传文件>视频文件夹>打开

Adobe Muse.允许您使用类似的工作流程为出版物创建网页;您不需要深入了解构建网站或页面的代码,尽管熟悉HTML5,CSS和JavaScript不会受到伤害。虽然传统的Web视频通常通过HTML5视频API添加,但是Adobe Muse通过创建特定任务所需的HTML 5但使用Muse中的普通语言接口在页面发布时编写代码的小部件来完成同样的事情。

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

缪斯截图

乐动体育赞助

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

  1. 在开始之前,为Muse网站创建一个文件夹。在该文件夹中,创建另一个文件夹 - 我们使用“媒体“ - 然后移动你的MP4.Webm.视频的版本进入该文件夹。

  2. 当你启动缪斯时,选择文件>新网站

  3. 打开布局对话框时,请选择桌面作为初始布局并改变页面宽度页面高度价值观1200.900。点击好的

  4. 双击硕士页面在Plan视图中打开母版页。打开主页面时,将标题和页脚导向器移动到页面的顶部和底部。您真的不需要此示例的标题和页脚。

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

缪斯截图

乐动体育赞助

使用窗口小部件已经死了。

  1. 您需要做的第一件事是通过选择返回平面图看法>计划模式

  2. 打开平面图后,双击主页打开它。

  3. 打开库面板 - 如果在界面的右侧未打开,请选择窗户>图书馆- 然后旋转下来[MR]全屏背景视频文件夹。

  4. 将文件夹小部件拖动到页面。

  5. 你会注意到选项请您输入视频的MP4和WebM版本的名称。完全按照您放置在其中的文件夹中拼写的内容。一个小技巧确保你没有犯错是为了复制MP4视频的名称并将其粘贴到MP4.Webm.地区选项菜单


    另一个技巧:所有这些小部件都是为您编写HTML 5代码。你可以告诉这个,因为你看<>在小部件。在这种情况下,您可以将窗口小部件从Web页面放到粘贴板上,它仍然会起作用。这样,它不会干扰您在页面上的任何内容。

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

缪斯截图

乐动体育赞助

虽然您添加了播放视频的代码,但Muse仍然不知道那些视频所在的位置。

  1. 修复此项,选择文件>添加上传文件

  2. 当。。。的时候上传对话框打开,导航到包含视频的文件夹,选择它们,然后单击打开

  3. 为确保已上传,打开资产面板,你应该看到你的两个视频。只是把它们留在小组中。它们不需要放在页面上。

  4. 要测试项目,请选择文件>在浏览器中预览页面或者,因为这是一个单一页面,文件>在浏览器中预览网站。您的默认浏览器将打开,视频将播放。

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

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

缪斯截图

乐动体育赞助

这是我们在这里谈论的网络,并且根据连接速度,您的用户可能会在视频加载时打开页面并盯着空白屏幕。这不是一件好事。这是如何处理这一点的荒谬。

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

  1. 要添加海报框架,请单击一次浏览器填充在页面顶部。

  2. 点击图像链接并导航到要使用的图像。

  3. 在里面配件区域,选择填补规模然后点击这一点中心点在里面位置区域。这将确保当浏览器的视口大小更改时,图像将始终从图像的中心缩放。您还将看到图像填充页面。

  4. 如果海报框架需要一段时间,则另一个小技巧是具有固体填充颜色。要执行此操作,请单击此处颜色芯片打开缪斯彩色选择器。选择滴眼剂工具并单击图像中的主要颜色。完成后,单击页面以关闭浏览器填充对话框。

  5. 此时,您可以保存项目或发布它。

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

此页面是否有帮助?