Kommentare

BeRo schrieb am 27.12.2017 um 20:48 Uhr

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... 👍

Viel Erfolg

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 28.12.2017 um 09:59 Uhr

Prima, läßt sich damit auch ein Überblendeffekt realisieren?

BeRo schrieb am 28.12.2017 um 12:22 Uhr

[...] 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...

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 28.12.2017 um 13:32 Uhr

Perfekt!

dieter-greif schrieb am 02.01.2018 um 18:53 Uhr

Funktioniert prima.

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.   

BeRo schrieb am 02.01.2018 um 20:58 Uhr

[...] 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.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 03.01.2018 um 16:00 Uhr

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.

dieter-greif schrieb am 03.01.2018 um 16:06 Uhr

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)

BeRo schrieb am 03.01.2018 um 18:50 Uhr

[...] 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. [...]

OK. Den Versuch war's in jedem Fall wert... 😎

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 05.01.2018 um 13:37 Uhr

Läuft soweit perfekt. Vielen Dank für den guten Support.

Jetzt stört nur noch der Fortschrittsbalken mit der Videosteuerung unter dem Video. Ich bin in html leider nicht bewandert, läßt sich das abschalten?

BeRo schrieb am 05.01.2018 um 13:47 Uhr

[...] Jetzt stört nur noch der Fortschrittsbalken mit der Videosteuerung [...]

Der wird nicht eingeblendet, wenn Du die Option "controls" aus dem Video Tag entfernst

Das war schon alles 😊

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 05.01.2018 um 13:51 Uhr

Klasse. 1a Support!

dieter-greif schrieb am 13.02.2018 um 22:25 Uhr

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>

BeRo schrieb am 14.02.2018 um 00:07 Uhr

[...] 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".

Viel Erfolg

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 14.02.2018 um 20:49 Uhr

OK, habe den Videovorspann ohne Seiteneffekte hochgeladen, also auch ohne die Option "auf Bildschirmgröße skalieren". Leider funktioniert es Android immer noch nicht. 

BeRo schrieb am 14.02.2018 um 22:48 Uhr

[...] 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...

Zuletzt geändert von BeRo am 14.02.2018, 23:54, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 15.02.2018 um 10:16 Uhr

Aha, so ist das. Da für mobile Geräte sowieso eine modifizierte Version erstellt werden muß, also kein großes Ding.

Danke nochmals. Hoffe ich bleibe nicht wieder irgendwo hängen....