Hilfreiche Ratschläge

Tipp 1: So binden Sie ein Video in eine Site ein

Wenn Sie vor dem Problem stehen, einen Videoclip zu den Seiten Ihrer Website oder Ihres Blogs hinzuzufügen, aber nicht wissen, wie Sie dies tun sollen, ist diese Lektion genau das Richtige für Sie! In dieser Lektion werden drei alternative Möglichkeiten zum Hinzufügen von Videos zur Site vorgestellt. Sie können die auswählen, die Ihnen am besten gefällt.



Das Internet entwickelt sich jeden Tag mehr und mehr. Heutzutage möchten Benutzer nicht nur Texte lesen, sondern auch verschiedene grafische Elemente und interaktive Gadgets sehen und dennoch Videos direkt von Webseiten ansehen. In vielen Fällen schafft dies zusätzlichen Komfort für den Benutzer (zum Beispiel, wenn er die Videoanweisung sehen kann) oder macht seinen Aufenthalt in der Webressource einfach mehr Spaß.

Egal, ob es sich um ein nützliches Video mit einer Lektion oder Anleitung, ein Demo-Video eines Produkts oder ein unterhaltsames Video handelt, das die Freizeit eines Benutzers aufhellt. Früher oder später muss dieses Video in eine Webseite eingebettet werden.

Hierfür gibt es verschiedene Möglichkeiten. Heute werden wir drei verschiedene Möglichkeiten betrachten, die Ihnen bei der Bewältigung dieser Aufgabe helfen. Die Wahl liegt bei Ihnen. Also lass uns gehen ...

So binden Sie ein Video in eine Site ein

Um alle unsere Beispiele zu testen, werde ich eine HTML-Datei erstellen und einige Stile damit verbinden. Unten finden Sie den Code für diese Datei und den Code für das Stylesheet, das mit dem HTML-Dokument verbunden ist. Sie können all diese Dateien auch in der Quelle für die Lektion finden. Ich werde diesen Code hier nicht erläutern, da er recht einfach ist und ich denke, dass Sie ihn selbst sehr gut verstehen. Wenn jedoch etwas nicht klar ist, können Sie Ihre eigene Frage in die Kommentare schreiben und ich werde sie beantworten Ich werde auf jeden Fall antworten.

Also, der HTML-Datei-Code:

Dies ist nur eine HTML5-Datei, die mehrere Header enthält. Außerdem werden wir unter jedem von ihnen den entsprechenden Code platzieren.

Ich habe auch einige Styles für diese Seite registriert. Sie werden in der Datei „style.css“ gespeichert, die sich im selben Verzeichnis wie die HTML-Datei befindet. Der Inhalt der Datei style.css lautet wie folgt:

Wenn wir unsere HTML-Datei in einem Browser öffnen, sieht sie jetzt so aus:

Nachdem die Vorbereitung abgeschlossen ist, können Sie das Video auf der Webseite selbst einfügen.

Erster Wegwas wir betrachten werden - Dies ist eine Videoeinfügung, die den Youtube-Dienst verwendet.

1. Das erste, was wir brauchen, ist eine Art Videoclip, den wir einfügen möchten. Nehmen wir an, wir haben es und es ist auf unserem lokalen Computer gespeichert.

Gehen Sie jetzt zu www.youtube.com. Hier müssen wir auf den "Login" -Button klicken, der sich in der oberen rechten Ecke befindet. Danach müssen Sie sich mit Ihrem Google-Konto anmelden. Wenn Sie es plötzlich noch nicht haben, müssen Sie es zuerst bekommen.

2. Nachdem Sie den Dienst unter Ihrem Konto eingegeben haben, klicken Sie auf die Schaltfläche "Video hinzufügen". Der Dienst fordert Sie auf, eine Datei zum Herunterladen auszuwählen, und Sie können die gewünschte Datei auswählen, die auf Ihrem Computer gespeichert ist.

Nachdem Sie die gewünschte Datei ausgewählt haben, wird sie geladen. Sie müssen etwas warten, bis es vollständig geladen ist.

Nachdem das Video vollständig heruntergeladen wurde, können Sie auf den entsprechenden Link klicken (der oben rechts nach der Meldung angezeigt wird, dass der Download abgeschlossen ist).

Wenn du auf diesen Link klickst, wird dein Video auf dem Youtube-Dienst veröffentlicht.

3. Jetzt müssen wir den Code erhalten, um das Video auf unserer Webseite einzubetten. Klicken Sie dazu direkt unter dem Video auf die Registerkarte "Freigeben" und dort auf die Registerkarte "HTML-Code".

Jetzt können Sie den HTML-Code sehen, den wir einfügen müssen. Hier können Sie auch einige andere Parameter einstellen, z. B. die Größe des Videos, ob nach dem Ansehen ähnliche Videos angezeigt werden sollen, und den Datenschutzmodus.

Wenn Sie alle Parameter konfiguriert haben, können Sie den Code kopieren und in Ihre HTML-Datei einfügen. Ich werde den Code wie folgt in die Datei unter der entsprechenden Überschrift einfügen:

Und jetzt, wenn wir uns die Arbeit unserer HTML-Datei im Browser ansehen, werden wir sehen, dass das Video eingefügt wurde und angezeigt werden kann (Sie können den Code in Aktion sehen, indem Sie auf das "Demo" -Symbol am Anfang des Artikels klicken).

Hier ist meines Erachtens alles klar. Fahren wir mit der nächsten Methode fort.

Fügen Sie das Video mit dem Skript des Players ein.

Sie können ein Video einfügen, ohne es auf einen Videodienst hochzuladen. Wenn Sie aus irgendeinem Grund kein Video zum Dienst hochladen möchten, können Sie das Skript des Players verwenden.

Du solltest also ein Video haben, das du hochladen wirst. Angenommen, es wird in einem Ordner auf Ihrer Site gespeichert. Ich speichere die Videodatei in einem Ordner mit dem Namen "video".

Jetzt brauchen wir den Player selbst. Derzeit gibt es viele kostenlose Player, mit denen Sie Videos auf der Website einfügen können. Lass uns den Flowplayer benutzen. Dies ist ein kostenloser Web-Video-Player, der speziell für Websitebesitzer entwickelt wurde.

1. Laden Sie die Player-Dateien auf Ihren Computer herunter, indem Sie hier auf den folgenden Link klicken: FlowPlayer

2. Nachdem Sie die Player-Dateien auf Ihren Computer heruntergeladen haben, müssen Sie sie in einen Ordner auf Ihrer Site entpacken. Ich habe den Ordner „flowplay“ erstellt und die Dateien dort entpackt.

3. Jetzt gehen wir zur HTML-Datei und beschäftigen uns mit einem Code.
Als erstes müssen wir die Javascript-Datei des Players mit unserer HTML-Datei verbinden. Dazu im Tag KopfSchreiben Sie unmittelbar nach dem Anschließen des Stylesheets den folgenden Code:

Wenn Sie die Datei in einem anderen Ordner ablegen, achten Sie darauf, dass der Pfad zur Datei richtig geschrieben ist.

4. Jetzt gehen wir in den Hauptteil unserer Datei und platzieren den Player selbst mit der wiedergegebenen Datei. Ich werde es direkt unter der entsprechenden Überschrift platzieren, nachdem ich es im div-Tag platziert habe, das in der Mitte ausgerichtet wird.

Hier müssen Sie die Pfade zu den Dateien überprüfen und Ihre eigenen registrieren. Seien Sie dabei vorsichtig.

Es gibt auch Einstellungen, die verhindern, dass das Video automatisch gestartet wird, es jedoch heruntergeladen werden kann. Wenn Sie möchten, dass das Video automatisch gestartet wird, müssen Sie nach dem Pfad zur Datei „flowplayer-3.2.2.swf“ das Komma entfernen, die Klammer schließen und „,“ (ohne Anführungszeichen) und alles andere, was danach und davor steht, einfügen Das zu entfernende Tag "/ script" schließen.

Wenn wir also die Seite im Browser überprüfen, sehen wir, dass wir jetzt 2 Videos haben: eines wird vom Youtube-Dienst heruntergeladen und das andere wird auf unserer Website gespeichert und mit dem Player geladen.

Beachten Sie, dass das vom Player hochgeladene Video im Format vorliegen muss .mp4 oder .flv.

Lassen Sie uns einen anderen Weg gehen und versuchen, dasselbe Video herunterzuladen., die auf unserem Server gespeichert sind, aber nur mit den neuen Funktionen von HTML5.

1. Suchen Sie die dritte Überschrift und schreiben Sie den folgenden Code direkt darunter:

Wenn Sie die Seite in einem Browser öffnen, sehen Sie, dass Ihr Video unter der dritten Überschrift hinzugefügt wurde. So einfach! Nur eine Zeile.

Stellen Sie sicher, dass Sie den Pfad zur Videodatei an der Stelle überprüfen, an der Sie sie gespeichert haben.

Mit der Option Steuerelemente wird ein Steuerungsfeld für das Video hinzugefügt.

Wenn Sie möchten, dass Ihr Video unmittelbar nach dem Laden der Seite abgespielt wird, müssen Sie den Parameter "Autoplay" hinzufügen.

Diese Methode entspricht den neuen HTML5-Standards und wird meiner Meinung nach Entwickler interessieren, die künftige Standards bereits heute implementieren möchten.

Es gibt jedoch Fallstricke, z. B. unterschiedliche Browser-Unterstützung für unterschiedliche Multimedia-Formate. Dieses Beispiel funktioniert in allen neuen Browsern, jedoch nicht im Opera-Browser. Damit dieser Code in Opera funktioniert, müssen wir die Videodatei in das Ogg Theora-Format konvertieren und den Code ein wenig ändern, um dem Browser eine alternative Auswahl zu bieten.

Sie können die Datei mit dem Dienst online-convert.com/ konvertieren. Speichern Sie die resultierende Datei nach der Konvertierung im Ordner „video“ und ändern Sie den Code zum Einfügen des Videos wie folgt:

Jetzt funktioniert das Beispiel im Opera-Browser.

Es gibt jedoch einen weiteren Haken bei älteren Browsern, die HTML5-Tags nicht verstehen. Leider erfordert der Übergang zu neuen Standards auch die Möglichkeit, Problemumgehungen zu finden.

Wenn ein Tag dem Browser nicht vertraut ist, ignoriert er es einfach, ignoriert jedoch nicht den Inhalt eines ihm unbekannten Elements. Daher können wir unserem Tag direkt eine Problemumgehung hinzufügen, um ein Video einzubetten. Der Code könnte so aussehen:

Mit diesem Code können neuere Versionen von Browsern unser Videoelement erfolgreich verarbeiten. Wenn ein Nutzer plötzlich eine Seite mit einem alten Browser öffnet, wird das unbekannte Video-Tag ignoriert, das iframe-Tag jedoch erfolgreich verarbeitet und das Video von Youtube heruntergeladen.

Vielleicht wird dies enden. Ich erinnere Sie daran, dass Sie alle Quellmaterialien herunterladen können, indem Sie auf das Symbol "Quellen" am Anfang des Artikels klicken, und Sie können die Arbeit aller drei Beispiele sehen, indem Sie auf das Symbol "Demo" an derselben Stelle klicken.

Hinterlassen Sie Ihre Kommentare und teilen Sie diesen Artikel mit Ihren Freunden über die Schaltflächen der sozialen Netzwerke. Ich wäre sehr dankbar.

Abonnieren Sie auch Blog-Updates. Vor uns liegen viele interessante und nützliche Themen zur Erstellung von Websites.

Ich wünsche Ihnen gute Laune und viel Erfolg bei Ihrer Arbeit!

Sehen Sie sich das Video an: Binden oder Tampons 1. Periode 3 Tipps für starke Mädchen (Dezember 2019).