在上一则帖文中,我们教你如何转换视频、减少文档的容量,以便你可以更轻松地在你的Wix 部落格或网站上使用它们

上一则贴文和你自身的视频文档,以及你的网站设计相关,这一则贴文将教你如何安装一个录像机,以接收网站到访者的视频

以下截图是为Wix而设的,不过,这里描述的方法,也可以用在其他网站架设平台,前提是你能在平台的管理器设定中,添加自定义的代码。

创建并添加一个Wix录像机

有了这个方法,用户将能够在你的Wix网站上,用他们的摄像头录制视频,或是让他们上载已经录好的视频。

 

wix-video-recorder

 

两个情况下,视频都能上传到你的YouTube、 Dropbox、谷歌云端硬碟、Amazon S3 或Microsoft Azure账户。为了在收到视频后,轻松地在网站上播放短片,把视频发送到YouTube 上是最合适的,因为你可以通过Wix的编辑器,嵌入视频。

要设立Wix录像机,我们得使用HTML5视频和 JavaScript摄像头API。这是一个嵌入在网站上,让你可以向用户和到访者,收集视频的小部件。它适用于任何网站,不过要在Wix的网站上使用,需要一些特定步骤。

 

*************
As recommended by Wix
, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.

A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.

*************
A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.
**************

 

1) 登录到Wix网站的管理器后台

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

 

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个代码片段复制到你的网站中,以在你的网站中嵌入录像机按钮。你可以忽略页面上的指示,因为那是为非Wix网站而设的指示。在你的情况中,需要将2个代码片段复制并粘贴到,你在Wix所创建的新页面的HTML编辑器。

 

clipchamp-api-code

 

5) 在Wix创建新页面,然后打开”HTML设定”

在 HTML编辑器中,从Clipchamp页面的第一段粘贴代码片段,从步骤4如下图所示:

wix-html-editor

 

6) 接着,在HTML编辑器中第一个代码片段底下,复制第二段

 

wix-html-editor

 

7) 然后,储存并预览你嵌入HTML代码的页面

如果代码添加正确,预览页面应该显示新的嵌入录像按钮。太好了!

test-video-button

 

8) 最后一步,授权视频按钮的域名

为了让录像机可以运作,你需要在Clipchamp的API设定中,将2个域名列入白名单:

第1个域名: 复制Wix用来显示嵌入 Clipchamp按钮的URL,将它添加到https://util.clipchamp.com/zh-Hans/api-setup/domains,你的Clipchamp API设定中的授权域名名单。请注意,这不是浏览器地址栏(我们假设你使用的是Chrome)中显示的URL (或 “域名”),而是iframe 的URL,你的页面中视频按钮所在的位置。

你可以通过移动鼠标,移动到预览页面中,Clipchamp按钮的底下,获得这个域名。接着右击并选择”浏览帧源”。在Chrome里,它将打开新的浏览器标签。前往标签地址栏,复制域名。在我们的例子中,域名是这样的

wix-iframe-url

第2个域名: 此域名跟着命名约定 yourwebsitename-wixsite-com.fileusr.com,比如 moestavern-wixsite-com.fileusr.com.。将它调整成你的网站名称,加入到你的Clipchamp域名名单中,然后你就能发布你的Wix测试页面。上面会有嵌入的录像按钮,你可以试试看播放是否正常。

你可以通过查看Wix的页面源代码,找到第2个域名

whitelist Wix domain to display the video recorder button

在Clipchamp API设定中,储存了这两个域名后,你的 Wix页面上的录像机和上载器按钮就能使用了, 你的到访者可以发送录像以及其他视频到你的YouTube频道上了。

 

wix-video-recorder

 

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

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

总结

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

如果你不是使用网站架设软件,请查看另一个 教程 installation instructions to embed the HTML5 video API

我们和客户一起设立这个软件,让它可以用在各种场景,以及任何类型的网页作业中。这包括了,比如你在经营网店,或是为你的部落格收集视频评论,你就可以使用这个API。

最后,我们的录像机拥有许多选项,比如说:你可以更换它的品牌、调整颜色以及其他风格元素,也可以选择输入和导出视频的相关设定。

本篇贴文尚未涵盖这些专业选项,不过我们欢迎你研究研究API文档,并决定你想要添加到你的Wix录像机的参数。只需要把选项加入到你在步骤6中,插入HTML编辑器中的代码片段即可。