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

时间:2016-07-26 09:04:09

标签: javascript html embed

我们有一个网站,旨在为访问者提供收听由编辑或用户自己创建的特定艺术家和播放列表的各种歌曲和专辑。我们在网站上使用的主要播放器是流媒体播放器。

此外,我们正在开发一项功能,可以让访问者获得一个歌曲/专辑/播放列表的嵌入代码,该代码计划在点击" Get embed code"之后自动生成。相关歌曲和播放列表页面上的按钮。此外,根据我们的计划,用户应该能够自定义宽度,长度和主题参数,然后才能获得他们实际收听内容的嵌入代码。有几个顶级网站,如spotify和苹果音乐这样的功能。

我在很多时间里对很多资源进行了关于这个主题的研究。但是,我遇到的主要是获取特定视频和歌曲的嵌入代码以及将其放在用户自己网站的源代码中的位置。我对这个过程的另一方感兴趣," kitchen"。因此,由于我无法找到任何足够的来源/文件,我来到这里是为了让那些知道围绕这个主题的人们帮助我解决问题,至少让我为我们的项目纠正和提供详细的资源。

谢谢大家!

2 个答案:

答案 0 :(得分:1)

这不是那么难。

大多数视频嵌入代码的工作原理是向插入代码的网站添加iframe。 iframe指向服务提供商网站上的特殊页面,该网站为视频提供服务。

你要做的就是首先手动编写代码,看看整个概念是否有效。

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

一个简单的例子:

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

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

iframe的来源位于您的服务器上,可以接收任何参数。

完成此操作后,您可以通过将此代码添加到网站来测试它。当视频显示和播放时,您可以自动执行代码。

代码自动化:

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

示例:

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

然后创建一个HTML表单,该表单将包含您要设置的所有参数的控件。确保,他们有一些不错的默认值。

所有表单都是,用您的参数替换模板中的占位符,并将结果显示在textarea中。

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

答案 1 :(得分:0)

我认为这很简单。

  1. 在单独的文件中创建任何css和javascript代码,以便客户端包含在他们的网站中。他们不需要任何不必要的代码。
  2. 创建一个html结构 - div和样式。基本上,您将提供HTML代码以合并到其他网站。
  3. 为嵌入代码创建编辑器。类似于facebook和按钮的东西。在那里,您可以让用户更改歌曲播放列表的大小和颜色,或者您希望其他网站使用的内容。
  4. 您还可以向您的网站提供iframe,以便从您的网页中访问所有资源。再次提供自定义使用的参数化。
  5. 这就是主要部分。您可以选择跟踪哪些网站正在使用您的播放器,他们点击的次数等等。

    没有通用的方法。你可以按照你需要的方式和你喜欢的方式来做到这一点。