Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

deak · 22-06-2011, 14:12

Hallo,
ich habe bei meinem Html Videoplayer ein Poster eingebunden.
Nun möchte ich aber auch das wenn das Video zu ende bzw der Stop Button gedrückt wird, das daß Poster wieder eingeblendet wird.

Jemand eine Idee?

Besten Danke

Deak

yaet · 26-06-2011, 14:41

Die einzige Lösung ist es, die "src" herauszunehmen und es gleich wieder zu plazieren. Hat der videotag eine feste Breite und Höhe ruckelt es nicht, sondern blinkt nur mal kurz auf. Alternativ kannst du auch ein img über den videotag plazieren, aber davon rate ich ab. Die "src" herauszunehmen ist übrigens auch die einzige Lösung um eine preload zu verhindern, da das preload-attribute nicht einwandfrei funktioniert.

So, nun die herangehensweise: Als erstes einen EventListener, der den "video-geendet" Status überwacht. Wenn dieser Fall eintritt wird die Funktion(hier gleich im EventListener) ausgeführt. Du kannst auch auf eine externe Funktion verweisen.

HTML-Code:

<html><head>
<script>
function Listener(){
document.getElementById('video').addEventListener('ended', function(){this.removeAttribute('src',0,0);this.setAttribute('src','meinvideo.mp4',0);}, false);
}
</script>
</head>
<body onload="Listener()">
<video id="video" src="meinvideo.mp4" poster="meinposter.jpg" controls>
</video>
</body>
</html>

ps: "stop" gibt es nativ nicht in HTML5 video, nur pause() und currentTime=0 ergeben "stop";

22-06-2011, 14:12	#1 (permalink)
deak mcm-web Registriert seit: Jun 2002 Ort: Germany Beiträge: 945	Html 5 Videoplayer > Poster Hallo, ich habe bei meinem Html Videoplayer ein Poster eingebunden. Nun möchte ich aber auch das wenn das Video zu ende bzw der Stop Button gedrückt wird, das daß Poster wieder eingeblendet wird. Jemand eine Idee? Besten Danke Deak __________________ da weisste bescheid, schätzelein!!!!

26-06-2011, 14:41	#2 (permalink)
yaet Neuer User Registriert seit: Jun 2005 Beiträge: 151	Die einzige Lösung ist es, die "src" herauszunehmen und es gleich wieder zu plazieren. Hat der videotag eine feste Breite und Höhe ruckelt es nicht, sondern blinkt nur mal kurz auf. Alternativ kannst du auch ein img über den videotag plazieren, aber davon rate ich ab. Die "src" herauszunehmen ist übrigens auch die einzige Lösung um eine preload zu verhindern, da das preload-attribute nicht einwandfrei funktioniert. So, nun die herangehensweise: Als erstes einen EventListener, der den "video-geendet" Status überwacht. Wenn dieser Fall eintritt wird die Funktion(hier gleich im EventListener) ausgeführt. Du kannst auch auf eine externe Funktion verweisen. HTML-Code: <html><head> <script> function Listener(){ document.getElementById('video').addEventListener('ended', function(){this.removeAttribute('src',0,0);this.setAttribute('src','meinvideo.mp4',0);}, false); } </script> </head> <body onload="Listener()"> <video id="video" src="meinvideo.mp4" poster="meinposter.jpg" controls> </video> </body> </html> ps: "stop" gibt es nativ nicht in HTML5 video, nur pause() und currentTime=0 ergeben "stop";

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Auflösung Poster ?	MalcomX	Am Rande	7	10-09-2007 03:06
[Suche Coolsite] Poster Rip-Off	beachmeat	Am Rande	3	06-06-2006 16:27
Poster Design	acore	Gestaltungstheorien	41	23-05-2004 20:44
Doppel Poster	Scrawer	Fragen, Konstruktive Kritik, Lob	4	04-10-2002 06:33