在今年年初的贴文中,我们教了你如何更轻易地使用你在Squarespace网站上的视频,无论是作为背景视频或是嵌入短片。

在今天的贴文中,我们会指导你,通过直接在网站上,嵌入录像机和上载器小部件,收集用户和网站到访者视频的最佳方法。

我们借用Clipchamp的HTML5相机API——一款可以用于任何网站的视频撷取工具,举例来说你在经营网店,并且在收集视频推荐稿,你就可以使用这个API来接收视频,或是在你的部落格中,接收读者的视频评论。

跟着我们的教程,你就能直截了当在Squarespace网站上进行下载,无需任何专业知识。

创建并添加一个Squarespace录像机

你可以决定到访者要在你的网站上,直接用他们的摄像头录像,或是选择并上载他们储存在设备上的视频,又或是提供两个选择让到访者自行决定。

我们特有的技术,将所有提交上来的视频,直接从用户的设备中,在不必通过我们的基础设施的情况下,上传到你指定的云端储存目标。这将有助于保护你和你的网站到访者的隐私。

squarespace-video-recorder

关于上载目的地,你可以选择将视频上传到你的YouTube、Dropbox、谷歌云端硬碟、Amazon S3或Microsoft Azure账户。

为了让短片能够在上载以后,得以在你的网站上播放,把视频发送到YouTube是最恰当的,因为你可以在那里通过Squarespace的管理器荧幕,嵌入视频。

以下步骤将教导你如何获取Squarespace的录像机:

1) 登录你的网站管理器界面

这个步骤是必要的,因为你需要在之后的步骤中,创建一个新页面的样式,并在它的 HTML中,复制粘贴一些代码。

Squarespace login

2) 在第二个浏览器标签中,注册免费的Clipchamp视频API试用

注册我们的API试用账户,才能获取独有的API密匙,也才可以在下一个步骤中,为你收到的视频指定上载目标。 注册时不需要信用卡,另外你可以随时取消试用服务。

register-clipchamp-trial

3) 把YouTube设定成上载用户视频的目标

启用试用账户后,在https://util.clipchamp.com/zh-Hans/api-setup/integrations的API设定中,点击YouTube 并把Clipchamp的API和你的YouTube账户连接起来,这样你的用户所提交的视频,才能上载到你的频道或指定播放列表。

set-youtube-uploads

4) 接下来,前往https://util.clipchamp.com/zh-Hans/api-setup/install

这个页面有2个代码片段 – 你需要将那2个代码片段复制到Squarespace(下面的步骤5和6),以在你的网站中嵌入摄像头录像机和上载器。你可以忽略页面上的指示,因为那是为非Squarespace网站而设的指示。

clipchamp-api-code

5) 在Squarespace创建新页面,打开“页眉代码注入”

页眉代码注入中,将Clipchamp页面第一段(包含你的API密匙)的密码片段复制过来,如下所示:

webcam-video-squarespace

6) 然后,把第2段代码片段放入页面中“页面内容”的代码块

编辑页面内容,

squarespace-video-camera

将新的代码块,添加到你想要置入视频按钮的页面。

add-code-block

squarespace-html5-video

在代码块中,插入你从https://util.clipchamp.com/zh-Hans/api-setup/install,复制出来的第2段(较大的)代码片段。

squarespace-html5-camera

请确保你在代码块中选择了以下设定:在下拉表中的”HTML”,在左边取消点选“展示来源”。添加代码片段后点击“应用”。

7) 接着,储存并预览你嵌入Clipchamp代码的页面

代码片段添加并成功储存后,预览页面应该显示Squarespace的录像机按钮。在我们的样式页面中,按钮是这样的:

squarespace video recorder - page preview

Squarespace video recording button

8) 最后一步,在Clipchamp设定中授权你的网站域名

为了让按钮可以运作,你需要在Clipchamp的API设定中,把按钮的域名列入白名单,如下所示:

把你的网站URL复制并添加到https://util.clipchamp.com/zh-Hans/api-setup/domains,你的Clipchamp API设定中的授权域名名单。

在我们的例子中,我们列入白名单的域名是 clipchamp-test.squarespace.com 以及 www.clipchamp-test.squarespace.com。请确保你输入的是自己的域名,也可以输入www.子域名

authorize domain in the Clipchamp API settings

在添加了URL到名单后,重新载入你的Squarespace页面预览。页面上会出现录像机和上载器的按钮,让你的到访者可以发送录像以及其他视频。

squarespace-video-recorder

在你的网站上显示所收到的视频

如果你想要在网站上展示其他人发送给你的视频,而视频现在正放在你的YouTube频道中,那么请你 查看以下Squarespace帮助的指示,了解如何嵌入YouTube视频。

Squarespace KB about embedding videos

结论

如果你正在使用Squarespace,这些是你收集视频所需要采取的步骤。请注意,我们也把内容总结成帮助文章,供注册 Clipchamp视频API账户的用户阅读。

我们的知识库文章包括了一些故障检修的建议,万一你的网站无法正常显示我们的视频按钮,可以在此得到帮助。其中还有一个选项,让你可以在每一个网站页面上,自动嵌入录像机,同时附上代码样式,让你可以随心所欲地自定义录像机。

摄像头小部件拥有许多自定义选项,比如说:你可以更换它的品牌、调整颜色以及其他风格元素,也可以选择输入和导出视频的相关设定。

本篇文章尚未涵盖这些专业选项,不过我们欢迎你仔细查看API文档以了解哪些参数,是你想要添加到你的Squarespace录像机的。只需要把选项加入到你在步骤6中,插入代码块的代码片段即可。

这则贴文是关于在Squarespace接收视频的,我们所描述的方法,也适用于在其他网站架设平台和内容管理系统中,置入录像机。比如说:我们也撰写了 一篇Wix的教程。 实行这些步骤最主要的一点是,你需要在网站管理器设定中,拥有添加自定义代码的权利。