Ich möchte auf einer Seite als Intro ein Video abspielen und dann ohne einen Button an zu klicken auf eine andere Seite überblenden. Wie kann ich das Problem lösen? Möglichst mit einem weichen Übergang.
Das Problem und die dazu passende Lösung hatten wir vor ca. 2 Jahren schon mal "auf dem Tisch", die dazu passende online Demo findest Du hier. Lies Dir mal den Thread durch. Mit den Erklärungen kannst Du Dein Problem leicht erschlagen... 👍
[...] läßt sich damit auch ein Überblendeffekt realisieren?
Ja, das geht, allerdings werden dann auch alle anderen Seiten des Projekts mit dem Effekt angezeigt...
Wenn Du das umsetzen willst, musst Du bei den Webexport Optionen lediglich die Option "Seiteneffekt-Website" aktivieren und einen geeigneten Effekt einstellen:
Außerdem muss der HTML Code im Head des Platzhalters angepasst werden. Bisher sah der so aus:
--------------------------------------------- <script type="text/javascript"> function weiter() { location.href='start.htm'; } </script> ---------------------------------------------
Jetzt sollte er so aussehen. Der geänderte- bzw. neu hinzugekommene Code ist fett markiert:
--------------------------------------------- <script type="text/javascript"> function weiter() { location.href='./index.htm#xl_xr_page_start'; } </script>
<script type='text/javascript'> var video = document.getElementById('myvideo'); video.volume = 0; </script> ---------------------------------------------
Probier's mal.
Viel Erfolg
P.S. Der Demo- und der Projektdatei habe ich den Einblenden Effekt verpasst, teste es mal hier...
Nun habe ich noch ein kleines Problem: Es dauert etwas bis das Video geladen ist. Solange wollte ich ein Image darstellen. Dazu hatte ich versucht einfach ein Image auf die Seite zu setzen und darauf das Video zu laden. Das Image wird gezeigt, aber nach dem laden des Video sieht man nur das Image, hört zwar den Ton des Video, aber das Video selbst ist nicht zu sehen, als wäre es überlagert.
[...] Es dauert etwas bis das Video geladen ist [...]
Die Zeit lässt sich abkürzen, wenn du dafür sorgst, dass das Video schneller startet. Hier findest Du das Tool "MP4 FastStart", das Du kostenfrei herunterladen kannst. Ein damit behandeltes MP4 Video startet anschließend nahezu verzögerungsfrei...
Wenn trotzdem noch Bedarf besteht, ein Platzhalter Bild vor dem Video Start zu zeigen, geht auch das ganz einfach, wenn Du die "Poster" Option des Video Tags aktivierst. Ein entsprechend modifiziertes Script kann etwa so aussehen:
---------------------------------------------------- <video width="480" height="310" autobuffer controls preload autoplay id="myiframe" poster="./index_htm_files/Poster_WD11.jpg"> <track kind="subtitles" src="index_htm_files/info.vtt" srclang="de" default>; <div>Schade – hier könnten Sie ein Video sehen, wenn Ihr Browser HTML5 Unterstützung hätte!</div> </video> ---------------------------------------------------
Der Eintrag, der für Dein Projekt relevant ist, ist im Script fett markiert. Du musst nur dafür sorgen, dass das Bild, das Du als Poster zeigen willst, im Datenverzeichnis "index_htm_files" abgelegt wird. Andernfalls müsstest Du den Code anpassen. Am besten legst Du das Bild im Hilfsverzeichnis* Deines Projekts an, dann erledigt der WD automatisch das Kopieren ins Datenverzeichnis.
Für ein ähnliches Projekt habe ich hier eine online Demo gespeichert, die auch mit einem Posterbild ausgestattet ist. Als kleines Schmankerl wird in der Demo auch gezeigt, wie beliebige Untertitel mit einer kleinen Textdatei in das laufende Video eingeblendet werden können...
Die dazu gehörende Projektdatei (mit allen Scriptcodes) kannst Du hier herunterladen.
Viel Erfolg
-------------------------------------------------- * Ein Hilfsverzeichnis wird vom WD automatisch erstellt, wenn Du z. B. eine vorhandene Grafik (oder einen Platzhalter) durch eine extern gespeicherte Grafik ersetzt. Alternativ kannst Du das Hilfsverzeichnis manuell anlegen. Dazu erstellst Du in dem Verzeichnis, in dem die Projektdatei (z. B. "sitename.web") liegt, ein neues Verzeichnis. Das Verzeichnis muss den Namen des Projekts haben (hier "sitename"), erweitert um "_web_files". Für unser Beispiel hat das Hilfsverzeichnis also den Namen "sitename_web_files". Alle Dateien, die Du in dieses Verzeichnis kopierst, werden vom WD bei einem Export/Upload automatisch gelesen und in das Datei Verzeichnis "index_htm_files" kopiert. Dort eventuell schon vorhandene Originaldateien werden dabei mit den Dateien aus dem Hilfsverzeichnis überschrieben! Wenn Du die "Hilfsverzeichnis" Methode benutzt, musst Du dich also um die korrekte Organisation Deiner Script- oder Multimediadateien nicht mehr kümmern, das macht dann der WD vollautomatisch.
OK, aber wie kann ich dieses "Poster Script" mit dem "function weiter()" Script kombinieren? Bei mir werden das Image und das Video untereinander dargestellt. Und in dem "Poster" Beispiel wird für die Video Darstellung ein anderes Script verwendet.
edit: das MP4 FastStart Tool hatte leider nichts beschleunigt. Das Video war schon von Video Pro X als Streaming file gerendert, dauert aber zu lange zum laden (wohl auch zu langsame Internetverbindung)
[...] wie kann ich dieses "Poster Script" mit dem "function weiter()" Script kombinieren? [...]
Das geht nicht, weil die Poster Info im Video Tag stehen muss, wie in dem o. a. Beispiel gezeigt. Konkret könnte das in Deinem Projekt so aussehen, wenn das Posterbild den Namen "Poster_WD11.jpg" hat...
--------------------------------------------------- <video width="480" height="310" autobuffer controls id="myvideo" poster="./index_htm_files/Poster_WD11.jpg" onended="weiter()"> <source src="./index_htm_files/intro.mp4" type="video/mp4"></source> <div>Schade – hier könnten Sie ein Video sehen, wenn Ihr Browser HTML5 Unterstützung hätte!</div> </video> ---------------------------------------------------
Der für das Poster neu eingefügte Teil ist im Script fett markiert
Wie im letzten Posting schon erklärt, musst Du dafür sorgen, dass das Poster Bild im Verzeichnis "index_htm_files" landet, z. B. mit dem Hilfsverzeichnis Verfahren...
[...] das MP4 FastStart Tool hatte leider nichts beschleunigt. [...]
Warum wird auf Android dieses Video nicht angezeigt? Auf Windows funktioniert es.
<video width="1280" height="720" autobuffer autoplay id="myvideo" onended="weiter()"> <xxx"></source> <div>Schade – hier könnten Sie ein Video sehen, wenn Ihr Browser HTML5 Unterstützung hätte!</div> </video>
<script type="text/javascript"> function weiter() { location.href='start.htm'; } </script>
[...] Warum wird auf Android dieses Video nicht angezeigt? [...]
Verschiedene Gründe könnten die Ursache sein...
Das Video TAG erscheint im Quellcode an 2 Stellen anders, als von Dir gepostet und es hat eine Größe "width='1280' ", die Probleme machen könnte...
Die "autobuffer" und "autoplay" Angaben dürfen nicht mit zusätzlichen Parametern eingetragen werden.
Die Website hast Du als Seiteneffekt-Website angelegt, mit der Option "Auf Bildschirmgröße skalieren"
Das ist für eine Website nur dann zu empfehlen, wenn sie Präsentationszwecken dient-, der Seiteninhalt sich auf wenige Infos beschränkt und alle Seiten gleich groß sind. Wird die Site auch als mobile Site verwendet, verbietet sich die Option von selbst, weil die Site auf kleinen Bildschirmen derart komprimiert wird, dass eine sinnvolle Betrachtung ausgeschlossen ist.
Du bist also gut beraten, wenn Du den Haken aus Checkbox entfernst und einen zusätzliche-, mobile Variante anlegst... 😇
Das Video wird auf meinem Android Smartphone problemlos wiedergegeben, wenn ich die URL "www.greifpanos.de/index_htm_files/GreifPanos_1.mp4" direkt aufrufe.
Probier' mal aus, ob die Video Wiedergabe auf Mobilgeräten funktioniert, wenn Du die Site ganz normal auf Deinem Webspace ablegst, also ohne die Option "Auf Bildschirmgröße skalieren".
OK, habe den Videovorspann ohne Seiteneffekte hochgeladen, also auch ohne die Option "auf Bildschirmgröße skalieren". Leider funktioniert es Android immer noch nicht.
[...] Leider funktioniert es Android immer noch nicht. [...]
Doch, es geht, wenn Du auf den "abspielen" Button tippst... (klick) 😇
Das Geheimnis liegt in der Steuerung der modernen Browser der Mobilgeräte. Aus gutem Grund wird standardmäßig dafür gesorgt, dass Videos nicht automatisch abgespielt werden. Selbst, wenn in den Einstellungen die Option "Video autoplay" akzeptiert wird... Lies Dir dazu auch mal diesen Thread durch, da hatten wir das Thema schon vertieft.
Für die mobile Variante Deiner Site heißt das, dass Du die am 05. Jan. ausgeblendete Option "controls" wieder aktivieren musst (s. hier).
Damit die Besucher Deiner Site nicht mit einem schwarzen Rechteck "leben" müssen, kannst Du entweder ein Poster Bild in der Wartezeit einblenden, wie ich das in der online Demo gemacht habe...
...oder Du überarbeitest das Video so, dass es mit einem vollständigen Bild beginnt.
[...] habe den Videovorspann ohne Seiteneffekte hochgeladen, also auch ohne die Option "auf Bildschirmgröße skalieren". [...]
Ohne die Option "Auf Bildschirmgröße skalieren" sind die Positionen der einzelnen Objekte etwas verschoben zu sehen. Das Video liegt in der Desktop Ansicht z. B. unten links, etc.
Das sind aber nur Kleinigkeiten, die Du sicher schnell in den Griff bekommst.
Viel Erfolg
----------------------------------
P.S. Der o. a. Link zur Demo ist nur temporär gültig. Weil vermutlich kein "öffentliches" Interesse besteht, lösche ich die Demo kurzfristig wieder vom Server...