Categories

Ausgewählte Vorlagen

JS Animated. Wie man mit Videobeispielen arbeitet

Andre Flores April 7, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

Guten Tag! Von diesem Tutorial erfahren Sie, wie man mit Videobeispielen in JS Animated Vorlagen arbeitet.

JS Animated. Wie man mit Videobeispielen arbeitet

In der Vorlage kann man sowohl das Vorschaubild des Videos als auch das Video ersetzen:

js_animated_how_to_manage_video_samples_1

Lassen Sie uns zeigen, wie man es macht.

Zuerst ersetzen wir das Vorschaubild des Videobeispiels durch Ihr eigenes Bild:

  1. Laden Sie das Bild in den Ordner /img/, zum Beispiel, die Datei mit dem Namen my_own_image.jpg, hoch.

  2. Definieren Sie die Datei .html in der die Videobeispiele festgelegt wurden. In unserem Fall ist es die Datei index.html.

  3. Öffnen Sie die Datei und finden Sie den Code des Videobeispieles. Er kann so aussehen:

    <h2><strong>Video Samples</strong><span></span></h2>
    <div class="container">
    <div class="row">
    <div class="col-lg-12">
    <div class="list_carousel2 responsive clearfix">
    <ul id="foo2">
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic1.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>01/</span> animals</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic4.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>04/</span> presentations</p>
    </li>
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic2.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>02/</span> sport</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic5.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>05/</span> flowers</p>
    </li>
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic3.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>03/</span> Advertising</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic6.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>06/</span> fashion</p>
    </li>
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic2.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>02/</span> sport</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic5.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>05/</span> flowers</p>
    </li>
    </ul>
    <hr>
    <div class="list_btn2">
    <a id="prev2" class="prev" href="#"></a>
    <a id="next2" class="next" href="#"></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    
  4. Das erste Vorschaubild des Videobeispieles kann man ersetzen, indem man diesen Code bearbeitet:

    <img src="img/page1_pic2.jpg" alt="">

Ersetzen Sie den Code img/page1_pic2.jpg durch img/my_own_image.jpg:

js_animated_how_to_manage_video_samples_2

Speichern Sie die Datei und aktualisieren Sie die Seite. Ein neues Vorschaubild wird hochgeladen:

js_animated_how_to_manage_video_samples_3

Nachdem wir das Bild ersetzt haben, können wir das Video ersetzen:

  1. Der Code des Videobeispieles sieht so aus:

    js_animated_how_to_manage_video_samples_4
  2. Öffnen Sie das Video auf der Website youtube.com, und drücken Sie auf den Button Teilen (Share) -> HTML – Code (Embed) unter dem Video:

    js_animated_how_to_manage_video_samples_5

Auf dem Bildschirmfoto unten haben wir den Code markiert, den Sie ersetzen müssen.

Ersetzen Sie die Zeile http://www.youtube.com/embed/2kodXWejuy0?rel=0” durch https://www.youtube.com/embed/your_video_id?rel=0”:

js_animated_how_to_manage_video_samples_6

Speichern Sie die Datei und aktualisieren Sie die Seite. Auf der Website wird das neue Video dargestellt:

js_animated_how_to_manage_video_samples_7

Dieses Tutorial ist jetzt zu Ende. Sie können jetzt selbst mit den Videobeispielen in JS Animated Vorlagen arbeiten.

Sie können auch das ausfuhrliche Video-Tutorial nutzen:

JS Animated. Wie man mit Videobeispielen arbeitet
Dieser Eintrag wurde um JS Animated Tutorials geschrieben und HTML, samples, video markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten