如何为其他网站生成/创建嵌入代码答案

【问题标题】：How to generate/create embedding code for other websites如何为其他网站生成/创建嵌入代码
【发布时间】：2016-11-29 20:14:23
【问题描述】：

我们有一个网站，旨在让访问者收听特定艺术家的各种歌曲和专辑，以及编辑或用户自己创建的播放列表。我们在现场使用的主要播放器是 flowplayer。

此外，我们正在开发一项功能，该功能可为访问者提供歌曲/专辑/播放列表的嵌入代码，该嵌入代码计划在点击相关歌曲和播放列表页面上的“获取嵌入代码”按钮后自动生成。此外，根据我们的计划，用户应该能够在获得他们实际收听内容的嵌入代码之前自定义宽度、长度和主题参数。有几个顶级网站，如 Spotify 和 Apple Music 都在做这个功能。

我在许多资源上对这个主题进行了数小时的研究。但是，我遇到的主要是获取特定视频和歌曲的嵌入代码以及将其放置在用户自己网站的源代码中的什么位置。我对这个过程的另一面感兴趣，“厨房”。因此，由于我找不到任何足够的源/文档，我来这里请教了解这个主题的训练的好人来帮助我的问题，至少让我为我们的项目更正和详细的资源。

谢谢大家！

【问题讨论】：

标签： javascript html embed

【解决方案1】：

这并不难。

大多数视频嵌入代码通过将iframe 添加到插入代码的站点来工作。 iframe 指向服务提供商网站上的一个特殊页面，该页面提供视频。

您所要做的就是先手动编写代码，看看整个概念是否有效。

当您的代码准备就绪后，您可以考虑自动化并向其添加参数。

一个简单的例子：

<iframe src="http://yoursite.com/videoembed/video/h34ghghwktya/?w=480&h=320" width="480" height="320"></iframe>

这就是您需要的所有嵌入代码。其余的（显示视频等）将在您自己的服务器（“http://yoursite.com/videoembed/video/h34ghghwktya/?w=480&h=320”）上完成。

iframe 的来源在您的服务器上，可以接收任何参数。

完成此操作后，您可以通过将此代码添加到站点来对其进行测试。当视频显示和播放时，您可以对代码进行自动化处理。

代码自动化：

创建代码模板，其中包含所有不会更改的部分（静态部分），并为可配置部分（参数）添加占位符。

例子：

<iframe src="http://yoursite.com/videoembed/video/{$videoid}/?w={$formwidth}&h={$formheight}" width="{$formwidth}" height="{$formheight}"></iframe>

然后创建一个 HTML 表单，其中包含您想要设置的所有参数的控件。确保它们有一些不错的默认值。

表单所做的只是用您的参数替换模板中的占位符并将结果显示在文本区域中。

代码生成器可以用Javascript和HTML编写，不需要服务器端代码。

【讨论】：

【解决方案2】：

我认为这很简单。

在单独的文件中创建任何 css 和 javascript 代码，以供客户包含在他们的网站中。他们不需要任何不必要的代码。
创建一个 html 结构 - div 和样式。基本上，您将提供 html 代码以合并到其他网站中。
为嵌入式代码创建一个编辑器。像 facebook like 和 shere 按钮之类的东西。在那里，您可以让用户更改您的歌曲播放列表的大小和颜色，或者您想让其他网站使用的任何内容。
您还可以向您的网站提供iframe，以便从您的网页中访问所有资源。再次为自定义使用提供参数化。

这就是主要部分。您可以选择跟踪哪些网站正在使用您的播放器、他们点击了多少次等等。

没有通用的方法。你可以按照自己的需要和喜欢的方式去做。

【讨论】：