如何爲其他網站生成/創建嵌入代碼

Question

我們有一個網站，旨在爲訪問者提供各種歌曲&由編輯或用戶自己創建的特定藝術家和播放列表的專輯。我們在網站上使用的主要播放器是流媒體播放器。

此外，我們正在開發一項功能，爲訪問者提供獲取在相關歌曲&播放列表頁面上單擊「獲取嵌入代碼」按鈕後計劃自動生成的歌曲/專輯/播放列表的嵌入代碼。另外，根據我們的計劃，用戶應該能夠在實際嵌入代碼之前自定義寬度，長度和主題參數。有像Spotify和蘋果音樂這樣的幾個頂級網站正在執行此功能。

我在很多資源上對這個話題進行了數小時的研究。但是，我遇到的主要是獲取特定視頻&歌曲的嵌入代碼以及將其放置在用戶自己網站的源代碼中的位置。我對這個過程的另一面「廚房」感興趣。因此，由於我找不到任何足夠的信息來源/文件，我來到這裏要求知道圍繞此主題進行演練的優秀人士幫助我解決問題，至少讓我糾正我們項目的詳細資源&。

謝謝大家！

Answer 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表單，這將有控制所有你想設置的參數。確保他們有一些不錯的默認值。

所有的表單會做的是，用你的參數替換模板中的佔位符，並在textarea中顯示結果。

代碼生成器可以用Javascript和HTML編寫，不需要服務器端代碼。

Answer 2

我認爲我很簡單。

1. 在單獨的文件中創建任何css和javascript代碼，以便客戶端將其包含在他們的網站中。他們不需要任何不必要的代碼。
2. 創建html結構 - div和樣式。基本上你會提供HTML代碼，併入其他網站。
3. 爲嵌入代碼創建一個編輯器。像Facebook和類似shere按鈕的東西。您可以讓用戶更改歌曲播放列表的大小和顏色，或者您想讓其他網站使用的任何內容。
4. 您還可以爲您的網站提供iframe，以便從您的網頁內訪問所有資源。再次爲自定義使用提供參數化。

這就是它的主要部分。您可以選擇跟蹤哪些網站正在使用您的播放器，他們點擊了多少次等等。

沒有通用的方法。你可以做到這一點，你需要它，你喜歡它。