Was sind interaktive Videos?

Beitragsbild

Autor: Serkan Sarica


Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt.

Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch vorgefertigt aufgezeichnet. Die Technik hat sich durch höhere Auflösungen und bessere Farben etc. deutlich verbessert, aber gab es wirklich revolutionäre Veränderungen für den Zuschauer? Wir sitzen vor dem Bildschirm und gucken nur zu. An der Technik haben wir doch schon so viel getan, warum nicht auch dem Zuschauer neue Funktionen geben? Bist du auch davon gelangweilt die Geschehnisse einfach hinzunehmen? Dann sind interaktive Videos genau das Richtige für dich.

Überblick

Klick dich gern durch den Beitrag:

Was sind interaktive Videos?

Wenn dir jemand mehr Kontrolle geben will, würdest du es ablehnen?
Interaktive Videos animieren den Nutzern Interaktion durchzuführen und ermöglichen somit Kontrolle über den Inhalt. Somit werden diese Art von Videos nicht passiv konsumiert – ganz im Gegenteil: Du als Zuschauer nimmst eine aktive Rolle ein und beeinflusst den Inhalt. Obwohl diese Videos schon seit Jahren existieren, sind sie immer noch kaum verbreitet.[1]

Einsatzmöglichkeiten

Diese Technik kann in vielen Bereichen eingesetzt werden.

Beispiele:

  • Lehre
  • Werbung
  • Entertainment

Vorteile von interaktiven Videos

Die Marketingagentur Room214 gibt mit ihrer Statistik an, dass die Click-Through-Rate bei interaktiven Videos bei 5-12 % liegt. Die üblichen Videos hingegen liegen bei nur 1-2 %. Außerdem wurden sie zu 90% vollständig angeschaut. Normale Videos wurden hingegen zu 50% – 85% komplett angeschaut. Ein weiterer Vorteil ist, dass die Anzahl der Aufrufe steigt. Dies kommt zustande, weil verschiedene Szenarien auswählbar sind und die Neugier der Zuschauer somit steigt. Sie wollen nämlich wissen, wie das Video ausgeht, wenn sie einen alternativen Pfad auswählen.

Einsatz in der Lehre

Die Technik hat vor allem in der Lehre sein Nutzen. Es ermöglicht über interaktive Punkte die Aufmerksamkeit zu fokussieren. Dadurch können die Inhalte des Videos vertieft werden.

„Diese interaktiven Punkte erlauben es, die Aufmerksamkeit der lernenden Person auf eine bestimmte Sequenz oder ein bestimmtes Detail des Videos zu lenken und tragen damit zum Verständnis des Videoinhalts bei. Auf diese Weise können die Lernenden das Maß an
Informationen regulieren und damit eine kognitive Überlastung vermeiden.“
Mehrwert darstellen
Abb. 1.: Mehrwert von Videos und interaktiven Videos aus der Sicht von Lehrpersonen[3]

Vor allem für Lernende mit wenig Vorstellungskraft ist diese Technik somit besonders hilfreich!

Beispiele

Honda Presents The Other Side

Beim folgenden Video handelt es sich um eine Werbung von Honda. In diesem Video kannst du parallel zwei Geschichten erleben. Per Mausklick oder R-Taste kannst du entscheiden, welche Story du sehen möchtest.

360° Video New Lipton Magnificent Matcha Tea Takes You Inside the Cup

In diesem Fall dachte sich Lipton „Warum nicht mit einem 360° Video unseren Tee vermarkten?“. Diese Technik ermöglicht dir das Video aus verschiedenen Perspektiven zu sehen. Außerdem kannst du entscheiden, was du dir genauer anschauen möchtest.

Star Wars: Welche Farbe hat dein Lichtschwert?

Star Wars Fans aufgepasst, denn dieses Beispiel ist etwas Besonderes! Hierbei handelt es sich um eine Reihe von Videos die zusammen eine Interaktive Geschichte bilden. Du kannst nämlich am Ende des Videos selbst wählen, wie die Geschichte weitergeht. Dafür wirst du zu einem nicht gelisteten Video weitergeleitet. Am Ende erfährst du welche Farbe dein Lichtschwert hat.

Fazit

Interaktive Videos sind die Weiterentwicklung von Web Videos. Auch wenn die Technik noch nicht sehr verbreitet ist, zeigt sie sehr viel Potential für die Zukunft. Immer mehr Streamingdienste bieten bereits interaktive Titel an, denn die Nachfrage steigt. Video ohne Interaktionen mit dem Zuschauer können in naher Zukunft deutlich an Beliebtheit verlieren. Anbieter wie auch Nutzer profitieren von dieser Technik. Die Nutzung macht nicht nur Spaß, sondern hat viele Vorteile für beide Seiten. Eins ist klar, interaktive Videos werden das Internet revolutionieren!

Quellen

1 Pink University (2016): Interaktives Video in der Weiterbildung – Formate und Vorteile. Online unter https://www.pinkuniversity.de/blog/e-learning-interaktives-video-interaktives-schulungsvideo-in-der-weiterbildung/ [Abruf am 14.07.20]


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Interaktive Karte für Stipendiaten an deutschen Hochschulen

Interaktive Karte: Stipendiaten an Hochschulen

Autor*in: Linda Khorami


Zur interaktiven Karte (Hochschulwebspace Linda Khorami)
Quellcode zum Download (Zip-Archiv)

Stipendiaten an deutschen Fachhochschulen
One Pager – Stipendiaten an deutschen Fachhochschulen

1. Einleitung 

Im Rahmen des Seminars „Multimediasysteme 2“ wurde ein One Pager zum Thema „Stipendiaten an deutschen Fachhochschulen“ erstellt. Hierfür wurden Informationen des Statistischen Bundesamtes herangezogen. Die Daten stammen aus dem Jahr 2018. Bei der Deutschlandkarte handelt es sich um eine SVG-Datei von „amcharts“

Step by Step – eine Übersicht 

Die Realisierung des One Pager kann in mehrere Schritte unterteilt werden. Für die Umsetzung des Beispiels wurden Arbeitspakete im Wochenrhythmus formuliert. Dadurch war eine realistische Einschätzung des Arbeitsaufwandes möglich:

Zeitraum Tätigkeiten
 

 

 

Woche 1

Themenfindung

  • Allgemeine Recherche zu verschiedenen Themen
  • Themensammlung
  • Präzise Recherche zu einzelnen Themen
  • Thema wählen und benötigte Informationen zusammenfassen

Umsetzung prüfen

  • Fragen klären:
  • In welcher Form kann das gewählte Thema umgesetzt werden (Als Diagramm, Landkarte usw.)
  • Form wählen  ( z.B. Landkarte)
  • Geeignete Landkarte finden
  • Quellcode der SVG übersichtlicher gestalten bzw.      Aufräumen
 

 

 

Woche 2

Animationen und Layout

Recherche, um folgende Fragen zu beantworten:

  • Wie können Inhalte eingepflegt werden, ohne die Seite bzw. die Karte zu überladen?
  • Welche Animationen können dabei unterstützen?
  • Finale Festlegung der Animationen
 

 

Woche 3

Umsetzung

  • Umsetzung der Animationen
  • Quellcode erneut aufräumen
  • Funktionalität testen

Dokumentation der bisherigen Vorgehensweise

 

Woche 4

 

Kontrolle und Abgabe

 

Konzept

Ziel der Karte ist es Informationen zu dem Thema kompakt dazustellen und Studenten die Möglichkeit zu geben sich einen Überblick zu verschaffen. Hierfür werden folgende Informationen vermittelt: Anzahl der Stipendiaten sowie die Anzahl der Frauen und Männer die im Vorjahr ein Stipendium erhalten haben. Für die technische Umsetzung wird dabei HTML, CSS und JavaScript verwendet.

Besonderheiten im Code

Im Header der HTML-Datei befinden sich externe Libraries die eingebunden werden müssen, um gewisse Styles unabhängig von den Animationen umzusetzen. Dazu gehören z.B. die Schriftfarbe und die Navigationsleiste des One Pager, die mittels Bootstrap realisiert werden. Die Programmlogik ist mit JQuery umgesetzt, dazu ist im Header eine Library eingebunden, die auch für Bootstrap relevant ist.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- Bootstrap for Navigation-->

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script> <!--jquery-->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script> <!-- popper externe Libary für Tooltips-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
  </script>

Aufwand und Funktionalität 

Die Animationen des One Pager unterteilen sich in zwei Teile. Zum einen sind Animationen innerhalb der SVG-Datei und somit in der Deutschlandkarte eingebaut. Zum anderen wird eine Animation für die Infotext-Anzeige außerhalb der Karte verwendet, welche durch einen Klick auf das jeweilige Bundesland ausgelöst wird. Dabei verfolgen beide dasselbe Ziel: Informationen online übermitteln, ohne zu verwirren.

1.  Karte

Innerhalb der Deutschlandkarte wird beim hovern eine Animation ausgelöst. Wenn der Besucher mit der Maus über ein Bundesland fährt, ändert sich die Farbe des Bundeslandes und die Animation mit einer Zoom-Funktion wird ausgelöst. Dies dient zur Veranschaulichung sowie Verdeutlichung, damit der Besucher genau weiß, welches Bundesland gemeint ist.

Um die Farbe bei einem Mouse-Over zu verändern, kann z.B. der folgende Code verwendet werden:

/* changing color while hovering*/

        .state:hover {

            fill: #004085;

            animation: zoominout 1s infinite;

        }

Diese Angabe gilt für alle Bundesländer, da diese zur Klasse “state” gehören.  Wie und wo eine Klasse vergeben werden kann, zeigt der folgende Code:

<path id="DE-BW" title="Baden-Württemberg" class="state" data-description="<ul><li>Stipendiaten: 1.375 </li><li>Frauen: 666</li><li>Männer: 709</li</ul>"

1.1 Animation der Karte umsetzen

Beim initialen mouse-over wird das Bundesland innerhalb einer Sekunde von der Originalgröße um 2% auf und wieder zurück skaliert. Die Animation kann mittels Keyframes umgesetzt werden und sieht aus wie folgt:

@keyframes zoominout {
            0% {
                transform: scale(1.0);
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(1.0);
            }
        }

2. Infobox 

Durch die Infobox werden nähere Informationen vermittelt. Durch einen Klick auf das jeweilige Bundesland erscheint eine Infobox, in der die Gesamtanzahl der Stipendiatinnen und Stipendiaten sowie die Verteilung unter Männern und Frauen zu finden sind.

Die einzelnen Informationen zu den Stipendiaten sind in das “data-description”-Attribut der jeweiligen Bundesländer eingetragen. Das Attribut ist nicht Teil der SVG-Datei und muss manuell hinzugefügt werden.

<path id="DE-BW" title="Baden-Württemberg" class="state" data-description="<ul><li>Stipendiaten: 1.375 </li><li>Frauen: 666</li><li>Männer: 709</li</ul>"

Technische Umsetzung  der Ränder

Die Animation der Infobox kann mit zwei Keyframes umgesetzt werden. Die definierte Regel “beforeBorders” löst eine Animation aus, bei der ein Rahmen um die Infobox gezogen wird:

@keyframes beforeBorders {

          0% {

              top: calc(var(--border-width) * -1);

              left: 50%;

              bottom: auto;

              right: auto;

              width: 0;

              height: var(--border-width);

          }



          33% {

              top: calc(var(--border-width) * -1);

              left: calc(var(--border-width) * -1);

              bottom: auto;

              right: auto;

              width: calc(var(--border-width) + 50%);

              height: var(--border-width);

          }



          66% {

              top: calc(var(--border-width) * -1);

              left: calc(var(--border-width) * -1);

              bottom: auto;

              right: auto;

              width: var(--border-width);

              height: calc((var(--border-width) * 2) + 100%);

          }



          100% {

              top: auto;

              left: calc(var(--border-width) * -1);

              bottom: calc(var(--border-width) * -1);

              right: auto;

              width: calc(var(--border-width) + 50%);

              height: calc((var(--border-width) * 2) + 100%);

          }

      }

Für die Farbe der Ränder wird eine zweite Regel definiert, auch diese besteht aus vier Teilen:

/* border color */
@keyframes borderColors {

    0% {

        border-top-color: transparent;

        border-right-color: transparent;

        border-bottom-color: transparent;

        border-left-color: transparent;

    }



    33% {

        border-top-color: var(--color);

        border-right-color: transparent;

        border-bottom-color: transparent;

        border-left-color: transparent;



    }



    66% {

        border-top-color: var(--color);

        border-right-color: var(--color);

        border-bottom-color: transparent;

        border-left-color: var(--color);

    }



    100% {

        border-top-color: var(--color);

        border-right-color: var(--color);

        border-bottom-color: var(--color);

        border-left-color: var(--color);

    }

}

Technische Umsetzung  der Box

Mit Hilfe der JavaScript Funktion öffnet sich eine Infobox beim Klicken auf eines der Bundesländer und zeigt den Namen des Bundeslandes sowie die oben erwähnten Informationen über die Stipendiaten (siehe Kommentare).

$(function () {
          $('.state').on('click', function (e) {
              let box = $('.state-description-box'), // select the description-box
                  clonedBox = box.clone(true); // clone this box
              box.before(clonedBox); // put this cloned-box before the first box
              $('.state-description-box:last')
                  .remove(); // remove the old one to trigger the same animation again

              let title = $(this).attr('title'); // get the title from the clicked element
              let description = $(this).attr(
                  'data-description'); // get the description from the clicked element
              let fullText = '<h4>' + title + '</h4><p>' + description +
                  '</p>'; // put this text together
              $('#state_description').html(fullText); // write the text into the box
              $('#state_description').parent().show(); // show the box, just the first time
          });

      });

Gestalterische Umsetzung

Die Navigationsleiste, sowie der Footer werden in diesem Beispiel mittels Bootstrap verwirklicht.

Im Allgemeinen ist das Design sehr schlicht gehalten, damit die Informationen der Seite im Vordergrund stehen. Daher besteht die Seite hauptsächlich aus Blau- und Grautönen.

Eine Besonderheit bei der gestalterischen Umsetzung ist, dass für die SVG-Datei andere Attribute als für HTML Elemente verwendet werden.  Im Folgenden werden die einzelnen Klassen mittels Kommentare beschrieben:

       /* Setting for the states*/
       .state {

          fill: lightgrey;

          stroke: white;

          stroke-width: 1.5;

          stroke-linecap: butt;

          stroke-linejoin: miter;

          stroke-miterlimit: 10;

          stroke-dasharray: none;

          stroke-opacity: 1;

      }



      /* changing color while hovering*/

      .state:hover {

          fill: #004085;

          animation: zoominout 1s infinite;

      }



      /* Setting for description-box that appears after clicking on the Map */

      .state-description-box {

          --border-width: 0.2em;

          --animation-speed: 0.5s;

          --color: #004085;

          color: var(--color);

          transform: scale(1, 0.8);

          border: var(--border-width) solid transparent;

          animation: borderColors var(--animation-speed) steps(1) forwards;

          outline: none;

      }



      .state-description-box-inner {

          width: 100%;

          cursor: pointer;

          padding: 0.2em;

          background: #cce5ff;

          z-index: 1;

          border: solid var(--border-width) transparent;

      }

      /*Setting for the Footer */
      .footer {

          padding: 2.5rem 0;

          color: #999;

          text-align: center;

          background-color: #f9f9f9;

          border-top: .05rem solid #e5e5e5;

      }

 


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2020, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

WebLab-Portfolio: Interaktives Video

WebLab-Portfolio: Interaktives Video

Wir arbeiten an der Konzeption und Umsetzung von interaktiven Videos und Lernszenarien. Hier sammeln wir Beispiele und fertiggestellte Arbeiten zu Interaktivität in Videos.

Beitragsbild

Was sind interaktive Videos?

Autor: Serkan Sarica Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt. Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch …

Interaktives Suchmaschinenvideo mit H5P

Interaktives Video: Wie funktionieren Suchmaschinen?

Im Rahmen von QpLuS-IM hat das WebLab-Team in Zusammenarbeit mit Monika Maßmeyer ein interaktives Video zur Visualisierung der Fragestellung: “Wie funktionieren Suchmaschinen?“ erstellt. Hier das interaktive Video zu der Funktionsweise von Suchmaschinen mit H5P (über den Doppelpfeil in der rechten, unteren Ecke öffnet sich das Video im Vollbildmodus):  H5P ist ein Open-Source-Werkzeug für die …

Interaktives Video: Wie funktionieren Suchmaschinen?

Interaktives Suchmaschinenvideo mit H5P

Im Rahmen von QpLuS-IM hat das WebLab-Team in Zusammenarbeit mit Monika Maßmeyer ein interaktives Video zur Visualisierung der Fragestellung: “Wie funktionieren Suchmaschinen?“ erstellt.

Hier das interaktive Video zu der Funktionsweise von Suchmaschinen mit H5P (über den Doppelpfeil in der rechten, unteren Ecke öffnet sich das Video im Vollbildmodus):

H5P ist ein Open-Source-Werkzeug für die Erstellung von interaktiven Lernszenarien. Die Basis für unser interaktives Suchmaschinenvideo ist ein normales” Video ohne Interaktion. Das nicht interaktive Video ist auf dem YouTube Channel unseres Studiengangs Informationsmanagement zu finden. Über ein H5P-Plugin für z.B. WordPress oder Moodle werden im nächsten Schritt Interaktionen im Video ergänzt.

Ein paar Eindrücke zum “Making Of” finden Sie in unserem Post “Von Duplo-Steinen und Suchmaschinen? auf der QpLuS-IM-Webseite.

Das interaktive Suchmaschinenvideo hatte seine Premiere bereits auf der InfoInMotion2019, aber auch hier im WebLab-Blog darf es nicht fehlen. Wir arbeiten auch in Zukunft weiter mit H5P für die interaktive Aufbereitung von Lerninhalten.