JS Animated. Wie man mit Videobeispielen arbeitet

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

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

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:

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

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

1. Der Code des Videobeispieles sieht so aus:

   

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:

   

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”:

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

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: