如何generate/create为其他网站嵌入代码
How to generate/create embedding code for other websites
我们有一个网站,旨在让访问者收听特定艺术家的各种歌曲和专辑以及由编辑或用户自己创建的播放列表。我们现场使用的主要播放器是flowplayer。
此外,我们正在开发一项功能,为访问者提供计划在点击相关歌曲和播放列表页面上的 "Get embed code" 按钮后自动生成的 song/album/playlist 的嵌入代码。此外,根据我们的计划,用户应该能够在获得他们实际收听内容的嵌入代码之前自定义宽度、长度和主题参数。有几个顶级网站,如 spotify 和 apple music 提供此功能。
我在许多资源上对这个主题进行了数小时的研究。然而,我遇到的主要是关于获取特定视频和歌曲的嵌入代码以及将其放置在用户自己站点的源代码中的什么位置。我对流程的另一端感兴趣,"kitchen"。因此,由于我找不到足够的 source/document,我来这里是想请教了解这个主题的人来帮助我解决问题,至少引导我为我们的项目更正和详细的资源。
谢谢大家!
这并不难。
大多数视频嵌入代码通过在插入代码的站点添加 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编写,不需要服务器端代码。
我觉得还是挺简单的。
- 在单独的文件中创建任何 css 和 javascript 代码,供客户包含在他们的网站中。他们不需要任何不必要的代码。
- 创建一个 html 结构 - div 和样式。基本上,您将提供 html 代码以合并到其他网站中。
- 为嵌入式代码创建一个编辑器。像 facebook 之类的东西和 shere 按钮。在那里你可以让用户改变你的歌曲播放列表的大小和颜色或者你想给其他网站使用的任何东西。
- 您还可以为您的网站提供 iframe,以便从您的网页中访问所有资源。再次为自定义使用提供参数化。
这就是主要部分。您可以选择跟踪哪些网站正在使用您的播放器、他们点击了多少次等等。
没有万能的方法。你可以按照你的需要和喜欢的方式去做。
我们有一个网站,旨在让访问者收听特定艺术家的各种歌曲和专辑以及由编辑或用户自己创建的播放列表。我们现场使用的主要播放器是flowplayer。
此外,我们正在开发一项功能,为访问者提供计划在点击相关歌曲和播放列表页面上的 "Get embed code" 按钮后自动生成的 song/album/playlist 的嵌入代码。此外,根据我们的计划,用户应该能够在获得他们实际收听内容的嵌入代码之前自定义宽度、长度和主题参数。有几个顶级网站,如 spotify 和 apple music 提供此功能。
我在许多资源上对这个主题进行了数小时的研究。然而,我遇到的主要是关于获取特定视频和歌曲的嵌入代码以及将其放置在用户自己站点的源代码中的什么位置。我对流程的另一端感兴趣,"kitchen"。因此,由于我找不到足够的 source/document,我来这里是想请教了解这个主题的人来帮助我解决问题,至少引导我为我们的项目更正和详细的资源。
谢谢大家!
这并不难。
大多数视频嵌入代码通过在插入代码的站点添加 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编写,不需要服务器端代码。
我觉得还是挺简单的。
- 在单独的文件中创建任何 css 和 javascript 代码,供客户包含在他们的网站中。他们不需要任何不必要的代码。
- 创建一个 html 结构 - div 和样式。基本上,您将提供 html 代码以合并到其他网站中。
- 为嵌入式代码创建一个编辑器。像 facebook 之类的东西和 shere 按钮。在那里你可以让用户改变你的歌曲播放列表的大小和颜色或者你想给其他网站使用的任何东西。
- 您还可以为您的网站提供 iframe,以便从您的网页中访问所有资源。再次为自定义使用提供参数化。
这就是主要部分。您可以选择跟踪哪些网站正在使用您的播放器、他们点击了多少次等等。
没有万能的方法。你可以按照你的需要和喜欢的方式去做。