So generieren/erstellen Sie Embedding-Code für andere Websites

Question

Wir haben eine Website entwickelt, um Besucher zu verschiedenen Titeln & Alben von bestimmten Künstlern und Wiedergabelisten von Redakteuren oder Benutzern selbst erstellt zu liefern. Hauptspieler, den wir vor Ort benutzen, ist der flowplayer.

Zusätzlich arbeiten wir an einer Funktion, die Besuchern das Einbetten des Codes eines Songs/Albums/einer Wiedergabeliste ermöglicht, der automatisch nach dem Klicken auf "Get embed code" auf dem zugehörigen Song & playlist generiert wird. Gemäß unseren Plänen sollten Benutzer außerdem in der Lage sein, die Parameter für Breite, Länge und Thema anzupassen, bevor sie Code einbetten, was sie tatsächlich hören. Es gibt mehrere Top-Websites wie spotify und Apple Music, die diese Funktion übernehmen.

Ich habe meine Forschungen zu diesem Thema auf viele Ressourcen für Stunden durchgeführt. Was ich jedoch angetroffen habe, ist hauptsächlich das Erhalten von Einbettungscode eines spezifischen Videos & Lied und wo es in den Quellcode der eigenen Websites des Benutzers zu platzieren. Ich bin auf der anderen Seite des Prozesses interessiert, "Küche". Deshalb, weil ich keine ausreichende Quelle/Dokument finden konnte, kam ich hierher, um großartige Leute zu fragen, die den Drill um dieses Thema kennen, um meine Frage zu beantworten, zumindest kanalisieren mich, um & detaillierte Ressourcen für unser Projekt zu korrigieren.

Danke euch allen!

Answer 1

Das ist nicht so schwer.

Die meisten Videoeinbettungscodes funktionieren, indem Sie einen iframe an der Stelle hinzufügen, an der der Code eingefügt wird. Der Iframe zeigt auf eine spezielle Seite auf der Website des Dienstanbieters, die das Video bedient.

Alles, was Sie tun müssen, ist, den Code manuell zuerst zu schreiben, um zu sehen, ob das ganze Konzept funktioniert.

Wenn Ihr Code bereit ist, können Sie über Automatisierung nachdenken und Parameter hinzufügen.

Ein kurzes Beispiel:

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

Dies ist das alle eingebetteten Code Sie benötigen. Der Rest (zeigt das Video, etc.) wird auf Ihrem eigenen Server gemacht ("http://yoursite.com/videoembed/video/h34ghghwktya/?w=480&h=320").

Die Quelle des iframe ist auf Ihrem Server und konnte alle Parameter empfangen.

Wenn Sie damit fertig sind, können Sie es testen, indem Sie diesen Code zu einer Site hinzufügen. Wenn das Video angezeigt und abgespielt wird, können Sie daran arbeiten, den Code zu automatisieren.

-Code Automatisierung:

eine Vorlage des Codes erstellen, die alle Teile enthält, die geändert werden nicht (statische Teile), und fügen Sie Platzhalter für die konfigurierbaren Teile (Parameter).

Beispiel:

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

Dann ein HTML-Formular erstellen, die Kontrollen für alle Parameter haben Sie einstellen möchten. Stellen Sie sicher, sie haben einige anständige Vorgaben.

Das ganze Formular würde tun, die Platzhalter in der Schablone durch Ihre Parameter zu ersetzen und das Ergebnis in einem Textarea anzuzeigen.

Der Codegenerator kann in Javascript und HTML geschrieben werden, kein serverseitiger Code ist erforderlich.

Answer 2

Ich bin ganz einfach meiner Meinung nach.

1. Erstellen Sie alle CSS-und Javascript-Code in separaten Dateien für den Client in ihre Website aufzunehmen. Sie benötigen keinen unnötigen Code.
2. Erstellen Sie eine HTML-Struktur - divs und Stile. Im Grunde werden Sie HTML-Code zur Verfügung stellen, der in anderen Webseiten enthalten sein soll.
3. Erstellen Sie einen Editor für eingebetteten Code. So etwas wie ein Facebook Like und Shere Buttons. Dort können Sie dem Nutzer die Größe und Farbe Ihrer Wiedergabeliste für Titel oder was auch immer Sie anderen Websites geben möchten, überlassen.
4. Sie können auch eine iframe Ihrer Website zur Verfügung stellen, so dass auf alle Ressourcen von Ihren Seiten aus zugegriffen wird. Erneutes Bereitstellen der Parametrisierung für die benutzerdefinierte Verwendung.

Und das ist es für den Hauptteil. Sie können optional verfolgen, welche Websites Ihren Player verwenden, wie oft sie darauf klicken und so weiter.

Es gibt keinen universellen Weg. Sie können es tun, wie Sie es brauchen und wie es Ihnen gefällt.