<p><span style="color: #3C556F;">Lieber <span style="text-decoration: underline;">XING-Kontakt</span>, vielen Dank f&uuml;r Ihren Besuch!</span></p>
<p><span style="color: #3C556F;">Wenn man ein <span style="text-decoration: underline;">Video</span> in die eigene <span style="text-decoration: underline;">Webseite</span> einbinden m&ouml;chte, wird dazu sehr oft das H.264 (<span style="text-decoration: underline;">MP4</span>) Format, sowie das Ogg Theora (<span style="text-decoration: underline;">OGG</span>) Format (Open Source) verwendet.</span></p>
<p><span style="color: #3C556F;">Aber auch als erstellte <span style="text-decoration: underline;">HTML5-Animation</span> lassen sich z.B. <span style="text-decoration: underline;">Animationsclips</span>, usw. sehr einfach einbinden.</span></p>
<p><span style="color: #3C556F;">evtl. m&ouml;gliche <span style="text-decoration: underline;">VORTEILE</span> k&ouml;nnen sein:</span></p>
<p><span style="color: #3C556F;">&#8211; evtl. <span style="text-decoration: underline;">schnellere Ladezeit</span>: da beim Starten nur die f&uuml;r die erste Szene ben&ouml;tigten Bilder geladen werden und alle anderen Bilder nachgeladen werden, w&auml;hrend der Clip bereits l&auml;uft. Auch <span style="text-decoration: underline;">Audio Dateien</span> brauchen so erst sp&auml;ter nachgeladen zu werden.</span></p>
<p><span style="color: #3C556F;">&#8211; <span style="text-decoration: underline;">Interaktion</span> mit dem Webseitenbesucher: z.B. der <span style="text-decoration: underline;">Besucher</span> k&ouml;nnte vorher gefragt werden, ob der MINI Cooper bei einer Stra&szlig;e <span style="text-decoration: underline;">nach rechts</span> oder <span style="text-decoration: underline;">nach links</span> abbiegen sollte (individuelle Story bzw. <span style="text-decoration: underline;">Interaktive Geschichte</span> f&uuml;r den Besucher)</span></p>
<p><span style="color: #3C556F;">&#8211; der Besucher kann w&auml;hrend des Videos, z.B. nach <span style="text-decoration: underline;">seinem Namen</span>, usw. gefragt werden und dieser Besucher im danach folgenden Video pers&ouml;nlich angesprochen bzw. entsprechend darauf reagiert (z.B. bei Wohnort in &Ouml;sterreich auf eine andere Art als bei Wohnort in Deutschland) werden.</span></p>
<p><span style="color: #3C556F;">&#8211; sogenannte &#8222;<span style="text-decoration: underline;">Parallax scrolling Websites</span>&#8220; lassen sich damit sehr einfach umsetzen, da sich die <span style="text-decoration: underline;">Frames</span> z.B. durch Scrollen mit der Mouse sehr einfach in <span style="text-decoration: underline;">beliebiger Geschwindigkeit</span> <span style="text-decoration: underline;">vor</span>&#8211; und auch <span style="text-decoration: underline;">zur&uuml;ckspielen</span> lassen. Ein einfaches von mir selbst erstelltes Beispiel k&ouml;nnen Sie <a target="_blank" href="http://schoenberg.co.at/parallax-scrolling-website_bsp-1.php">hier sehen</a> :-)</span></p>
<p><span style="color: #3C556F;">&#8211; <span style="text-decoration: underline;">einzelne Bilder</span> k&ouml;nnen nachtr&auml;glich sehr einfach korrigiert oder <span style="text-decoration: underline;">ver&auml;ndert</span> werden, ohne dann die ganze Videodatei (z.B. .mp4, .flv, usw.) neu erstellen zu m&uuml;ssen.</span></p>
<p><span style="color: #3C556F;">m&ouml;gliche <span style="text-decoration: underline;">NACHTEILE</span> k&ouml;nnen sein:</span></p>
<p><span style="color: #3C556F;">&#8211; nur f&uuml;r <span style="text-decoration: underline;">bestimmte Clips</span> m&ouml;glich bzw. sinnvoll, z.B. <span style="text-decoration: underline;">Animationsclips</span>, Pr&auml;sentationen, <span style="text-decoration: underline;">interaktive</span> Erkl&auml;rungsvideos, interaktive Supportvideos, usw.</span></p>
<p><span style="color: #3C556F;">&#8211; evtl. <span style="text-decoration: underline;">h&ouml;herer Arbeitsaufwand</span> f&uuml;r die Erstellung</span></p>
<p><span style="color: #3C556F;">sowie <span style="text-decoration: underline;">sonstige Nachteile</span> bzw. m&ouml;gliche Einschr&auml;nkungen</span></p>
<p><span style="color: #3C556F;">Darunter habe ich ein <span style="text-decoration: underline;">einfaches Beispiel</span> einer solchen selbst erstellten <span style="text-decoration: underline;">HTML5-Animation</span> eingef&uuml;gt. Die daf&uuml;r notwendigen <span style="text-decoration: underline;">HTML- und JavaScript-Dateien</span> habe ich mit dem von mir <span style="text-decoration: underline;">programmierten HTML-Animationstool</span> unter diesem Link <a target="_blank" href="https://schoenberg.co.at/blog-software/2013/08/videoclips-und-animationen-mit-html5-animationstool-erstellen/">hier ansehen</a> erstellt.</span></p>
<p><span style="color: #3C556F;">In diesem Beispiel k&ouml;nnen Sie auch im Feld rechts oben anstatt des &#8222;<span style="text-decoration: underline;">xxx</span>&#8220; eigene Zeichen eingeben. Diese von Ihnen eingegebenen Zeichen werden dann in der <span style="text-decoration: underline;">1. Szene</span> auf dem <span style="text-decoration: underline;">Autokennzeichen</span> (hinten) des Mini Coopers eingef&uuml;gt (<span style="text-decoration: underline;">Interaktion</span>). Links oben wird au&szlig;erdem immer die tats&auml;chliche <span style="text-decoration: underline;">Uhrzeit</span> (Stunden-, Minuten- und Sekundenzeiger) dargestellt. Auch die <span style="text-decoration: underline;">Audio-Dateien</span> werden, wie oben bereits erw&auml;hnt, beim jeweils <span style="text-decoration: underline;">zugeh&ouml;rigen Frame</span> abgespielt. Dazu m&uuml;ssen Sie allerdings zuvor rechts oben (an 2. Stelle) das <span style="text-decoration: underline;">H&auml;ckchen</span> bei &#8222;<span style="text-decoration: underline;">Audio ?</span>&#8220; setzen.<br />
</span></p>
<p>&nbsp;</p>
<p><iframe loading="lazy" id="if-html5" style="width: 480px; height: 270px;" src="https://files.schoenberg.mobi/html_animation_video-bsp_1/html_export.html" width="480" height="270" scrolling="no" frameborder="0"></iframe></p>
<p>&nbsp;</p>
<p><span style="color: #3C556F;">und hier wie immer ein Glitze-Kleines-Bisschen <span style="text-decoration: underline;">Werbung</span> :-(</span></p>
<p><a href="http://schoenberg.co.at/api-software/"><img src="https://files.schoenberg.mobi/banner_0009x.gif" alt="schoenberg - think MINI" /></a></p>

<br />
          <div style="background-image: url('https://schoenberg.co.at/blog-software/wp-content/plugins/schoenberg-add-content/gesamt Blatt_4c_t1.png'); background-repeat:no-repeat; background-size: 760px 300px;">
              <p><span style="color: #3C556F;"><span style="text-decoration: underline;">Tools, Software & Programme</span> aufgrund <span style="text-decoration: underline;">DSGVO</span> leider <span style="text-decoration: underline;">nicht mehr verf&uuml;gbar !!</span> Fehler, Irrt&uuml;mer, usw. <span style="text-decoration: underline;">nicht ausschlie&szlig;bar</span>!</span></p>
              <p><span style="color: #3C556F;">vielen Dank f&uuml;r Ihr Verst&auml;ndnis und Ihnen sch&ouml;ne Gr&uuml;&szlig;e, </span></p>
              <p><span style="color: #3C556F;">Christian Sch&ouml;nberg (privater Blogartikel)</span></p>
              <p></p>
              
              <a target="_blank" href="https://www.xing.com/spi/shares/new?url=https%3A%2F%2Fschoenberg.co.at%2Fblog-software%2Fwp-json%2Fwp%2Fv2%2Fposts%2F3427"><img src="https://schoenberg.co.at/xing_51x51__I.gif" onmouseover="this.src='https://schoenberg.co.at/xing_51x51__II.gif';" onmouseout="this.src='https://schoenberg.co.at/xing_51x51__I.gif';" alt="XING.com - Netzwerk f&uuml;r Beruf und Leben" /></a> &nbsp;&nbsp;&nbsp; 
              <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fschoenberg.co.at%2Fblog-software%2Fwp-json%2Fwp%2Fv2%2Fposts%2F3427" alt="Facebook" /><img src="https://schoenberg.co.at/facebook_51x51__I.gif" onmouseover="this.src='https://schoenberg.co.at/facebook_51x51__II.gif';" onmouseout="this.src='https://schoenberg.co.at/facebook_51x51__I.gif';" alt="Facebook" /></a> &nbsp;&nbsp;&nbsp; 
              <a target="_blank" href="https://twitter.com/share" data-url="https%3A%2F%2Fschoenberg.co.at%2Fblog-software%2Fwp-json%2Fwp%2Fv2%2Fposts%2F3427"><img src="https://schoenberg.co.at/twitter_51x51__I.gif" onmouseover="this.src='https://schoenberg.co.at/twitter_51x51__II.gif';" onmouseout="this.src='https://schoenberg.co.at/twitter_51x51__I.gif';" alt="Twitter" /></a>
              
          </div>   
{"id":3427,"date":"2016-11-14T23:06:35","date_gmt":"2016-11-14T23:06:35","guid":{"rendered":"https:\/\/schoenberg.co.at\/blog-software\/?p=3427"},"modified":"2017-03-14T23:23:22","modified_gmt":"2017-03-14T23:23:22","slug":"videos-als-html5-animationen-auf-der-webseite-einbinden","status":"publish","type":"post","link":"https:\/\/schoenberg.co.at\/blog-software\/2016\/11\/videos-als-html5-animationen-auf-der-webseite-einbinden\/","title":{"rendered":"Videos als HTML5-Animationen auf der Webseite einbinden"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"<p>Lieber XING-Kontakt, vielen Dank f&uuml;r Ihren Besuch! Wenn man ein Video in die eigene Webseite einbinden m&ouml;chte, wird dazu sehr oft das H.264 (MP4) Format, sowie das Ogg Theora (OGG) Format (Open Source) verwendet. Aber auch als erstellte HTML5-Animation lassen sich z.B. Animationsclips, usw. sehr einfach einbinden. evtl. m&ouml;gliche VORTEILE k&ouml;nnen sein: &#8211; evtl. schnellere [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,95,208,139,300],"tags":[145,631,655,633,653],"_links":{"self":[{"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/posts\/3427"}],"collection":[{"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/comments?post=3427"}],"version-history":[{"count":10,"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/posts\/3427\/revisions"}],"predecessor-version":[{"id":3438,"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/posts\/3427\/revisions\/3438"}],"wp:attachment":[{"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/media?parent=3427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/categories?post=3427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/schoenberg.co.at\/blog-software\/wp-json\/wp\/v2\/tags?post=3427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}