Bubble.io Tutorial - Videos einbinden (Youtube, Vimeo, Wistia, video.js) [Deutsch]

In diesem Video lernst Du die verschiedenen Wege in Bubble Videos in deine eigene Web-app einzubinden. Wir zeigen vier verschiedene Wege im Detail und am Ende eine Weiterempfehlung auf ein zu bezahlendes Plugin:

• Youtube
• Vimeo
• Wistia
• Video.js
• Bezahl Plugin: HTML5 Video

Hier ist der iFrame Code für Wistia: https://github.com/strobl/bubbleiotutorials/blob/master/iframe.html

Hier ist der Link zum paid Plugin HTML5 Video Player: https://bubble.io/plugin/html5-video-player-1544679421691x581364656889921500

🎪 Demo: https://video-demo-app.bubbleapps.io/

📝 Editor: https://bubble.io/page?name=index&id=video-demo-app

Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige ich heute die unterschiedlichen Wege in Bubble.io Videos einzubinden. Ich habe schon ein paar Sachen vorbereitet und wir legen direkt mal los. Wenn ihr das Video Element nehmt und in den Screen reinzieht, wir zentrieren das ganze horizontal und machen einen Abstand von 20 Pixel. Dann habt ihr hier zwei Auswahlmöglichkeiten: einmal YouTube und einmal Vimeo.

Wir fangen direkt mal an mit YouTube. Ich habe ein Video vorbereitet und ihr seht hier oben in diesem Video die ID. Wenn wir diese nehmen und kopieren und einfügen, dann habt ihr auch dann in Bubble.io direkt diese ID. Ihr habt die Möglichkeit automatisch das Video zu starten, sobald die Seite geladen ist oder auch ein Reply . Wenn wir aufs Preview gehen, seht ihr wie wir jetzt das Youtube-Video  haben -  direkt in Bubble, auf unserer Seite. Der zweite Weg ist nun, dass wir mit Vimeo ein Bubble Video integrieren. Hierfür nehmt ihr wieder das Video Element, zentrieren horizontal und anstatt YouTube neben wir Vimeo. Ihr seht wie wir nun auch die control color ändern können und nun brauchen wir wiederum diese Video ID. Ich bin dafür auf eine Video Seite gegangen. Habe hier ein ein Video und nehme hier oben die Video ID und kopiere diese wiederum hier rein. Wenn wir  auf Preview gehen, haben wir nun zusätzlich auch die Möglichkeit Vimeo Videos abzuspielen. Ein weiterer Weg ist nun dass wir wistia integrieren. Hierfür nehmen wir ein HTML element.

Und wenn ihr auf die Developer Dokumentation von wistia gehen, dann gibt's da ganz unterschiedliche Möglichkeiten die wistia videos zu integrieren. Und das ist vor allem weil Wistia ja ein Bezahlservice ist. Und über diesen Bezahlservice habt ihr dann die Möglichkeit z.b. dass eure Videos nicht runtergeladen werden. Ein guter Weg ist, auf jeden Fall mit einem iFrame. Ihr habt hier verschiedene Code Beispiele. Ich habe schon mal etwas vorbereitet. Den Code hierfür bekommt ihr natürlich in den Shownotes und könnte das dann übernehmen. Wir kopieren das. Packen das ins HTML Element rein. Und für euch entscheidend nun das Video.

Ihr macht nicht "Display as an iFrame", weil ansonsten Scrollbars hinzugefügt werden für dieses iframes. Sondern im Code selber stretched das quasi auf die Größe. Wir gehen in Preview und haben nun auch wistia als Video zur Verfügung. Der letzte Punkt ist nun noch: was macht ihr, wenn ihr eigene Videos habt, die ihr auf eurer Plattform hochladet. Und hierfür gibt es ein sehr gutes Plugin, nämlich Video.js . Ihr geht in Plugins. Und nehmt das kostenlose Plug-In video.js von No Coe Co. Anschließend, seht ihr hier unten Video.js Ihr wählt das aus. Zentriert horizontal. Und klickt hier auf Upload und ihr ladet ein Video hoch. Sobald das Video nun hochgeladen ist, könnt ihr das ganze noch anpassen.

Das ist immer natürlich auch dynamisch möglich, also mit Userdaten, wir können ein Thumbnail erstellen oder aber auch anzeigen, ob man das Video weiterspulen kann oder nicht. Autoplay, Schleifen, und andere Dinge. Und wir gehen jetzt einmal auf Preview und sehen nun dass wir auch das Video.js mit einem statischen file hochgeladen haben. Wenn euch das nicht ausreicht für eure Videos, dann gibt es noch ein sehr gutes Plugin. Das Plugin ist bezahlt und heißt HTML5 video player, das kostet 60 $ und ist vom Bencos Apps.

Und das tolle ist das es hier eine Preview gibt. Ich hab das hier auf video-demo-app.bubbleapps.io und wir können hier eben sehen, welche ganze Möglichkeiten ihr habt. Wie z.b. den Playback speed zu ändern. Fullscreen zu haben. Ihr könnt aber auch z.b. sagen: ich möchte das Ganze an einer gewissen Position starten. Ihr habt die Möglichkeit , dass das Video so bei dir scrollt runter geht.

Und was ganz toll ist, dass diese dieses Plugin eben auch den Editor zur Verfügung stellt. So dass ihr direkt auch die Workflows seht, wie genau dieser Player dann optimiert. Ich hoffe, ich konnte euch zeigen, wie man in Bubble.io ganz unterschiedliche Wege hat Videos zu integrieren und wünsche weiterhin viel Erfolg. und auf bal