HTML5 Video mehrere Dateien hintereinander

[Jugular]

Hallo,

gibt es eine Möglichkeit "von Haus aus" mehrere kleine Video Schnipsel hintereinander abzuspielen?
In der Spezifikation finde ich leider nicht hilfreiches in die Richtung :(

Alternativ: Bestimmt kann man via Javascript eine Lösung finden. Quasi Onstop:next_video ;) Lieber wäre mir die offizielle Lösung, wenn es denn eine gibt.

Vielen dank schon mal

[Richard Rüfenacht]

Hallo Jugular

gibt es eine Möglichkeit "von Haus aus" mehrere kleine Video Schnipsel hintereinander abzuspielen?
In der Spezifikation finde ich leider nicht hilfreiches in die Richtung :(

Das ist nicht Teil der Spezifikation zum video-Element.

Alternativ: Bestimmt kann man via Javascript eine Lösung finden. Quasi Onstop:next_video ;) Lieber wäre mir die offizielle Lösung, wenn es denn eine gibt.

Das wirst du ganz offiziell mit JavaScript lösen müssen. Stichworte sind hier „ended“, wenn du am Ende des Videos zum nächsten schalten willst, und „switchVideo“, wenn du zwischen verschiedenen Videos wechseln willst. Wenn du konkret sagst, was genau du machen willst, kann ich dir das gern näher erklären.

Schau dir mal dieses Beispiel an. Da ist eigentlich alles erklärt.

Viel Spass und beste Grüsse Richard

[Jugular]

Schau dir mal dieses Beispiel an. Da ist eigentlich alles erklärt.

Viel Spass und beste Grüsse Richard

Danke für den Tip. Werde das Beispiel mal auseinandernehmen.

Wenn du konkret sagst, was genau du machen willst, kann ich dir das gern näher erklären.

Ich habe einen längeren Film in mehreren einzelnen Dateien. Im Dateinamen sind aufsteigende Zahlen, also gut zu lösen mit Javascript denke ich^^

[Der Martin]

Hallo,

Ich habe einen längeren Film in mehreren einzelnen Dateien. Im Dateinamen sind aufsteigende Zahlen, also gut zu lösen mit Javascript denke ich^^

ja, das dürfte mit vertretbarem Aufwand zu machen sein.

Bleibt nur ein ästhetisches Problem: Werden mehrere Clips hintereinander gespielt, entsteht zwischen den einzelnen Teilen immer eine kurze Pause. Dagegen kannst du aber nichts tun - erstens weißt du nicht, welchen Player der jeweilige Browser intern wirklich verwendet, zweitens können die meisten Player nicht lückenlos abspielen.

Ich suche beispielsweise schon lange nach einer Möglichkeit, dem Videolan Player lückenloses Abspielen von mehreren Tracks einer Playlist beizubringen; bisher habe ich keine gefunden.

So long,
 Martin

[Jugular]

Der Aufwand ist vertretbar, trotzdem klappt es nicht :P kannst du mir vielleicht helfen wo es hakt?? Das ganze sieht zurzeit wie folgt aus:

<video controls id="ews">  
	<source id="vidsrc" src="video/ews_001.mp4" type="video/mp4"/>  
	<track src="video/ews_001_de.vtt" srclang="de" label="Deutsche Untertitel" kind="subtitles" default>  
	Your user agent does not support the HTML5 Video element.  
</video>  
	<script type='text/javascript'>  
		document.getElementById('ews').addEventListener('ended',myHandler,false);  
		function myHandler(e)  
			{  
			if(!e) { e = window.event; }  
			var nextvid = "video/ews_002.mp4";  
			document.getElementById('vidsrc').setAttribute("src", nextvid);  
			}  
	</script>

Ist ein wenig aus dem Netz zusammengeklaut ;) zumindest wie ich eine Aktion am Ende des Videos ausführe.

leider klappt es aber nicht :( Ich weiß nicht, ob er das Attribut "src" ändert, aber nicht anzeigt oder ob da schon ein genereller fehl er drin ist. Eine Textfarbe mit dem Codefragment funktioniert :)

[Matthias Apsel]

Om nah hoo pez nyeetz, Jugular!

leider klappt es aber nicht :( Ich weiß nicht, ob er das Attribut "src" ändert,

Firebug und Co. können helfen.

Matthias

[Der Martin]

Hallo,

<video controls id="ews">

<source id="vidsrc" src="video/ews_001.mp4" type="video/mp4"/>
<track src="video/ews_001_de.vtt" srclang="de" label="Deutsche Untertitel" kind="subtitles" default>
Your user agent does not support the HTML5 Video element.
</video>
<script type='text/javascript'>
document.getElementById('ews').addEventListener('ended',myHandler,false);
function myHandler(e)
{
if(!e) { e = window.event; }
var nextvid = "video/ews_002.mp4";
document.getElementById('vidsrc').setAttribute("src", nextvid);
}
</script>

>   
> Ist ein wenig aus dem Netz zusammengeklaut ;) zumindest wie ich eine Aktion am Ende des Videos ausführe.  
>   
> leider klappt es aber nicht :( Ich weiß nicht, ob er das Attribut "src" ändert, aber nicht anzeigt oder ob da schon ein genereller fehl er drin ist. Eine Textfarbe mit dem Codefragment funktioniert :)  
  
das heißt, die Handler-Funktion wird zum richtigen Zeitpunkt tatsächlich aufgerufen?  
Was mir an deinem Javascript-Code sauer aufstößt, ist der Umweg über setAttribute(). Ich bin nicht überzeugt, dass ein nachträgliches Ändern des Attributwerts tatsächlich auch auf das zugehörige Javascript-Objekt übertragen wird.  
  
Warum änderst du nicht direkt die src-Eigenschaft des Objekts, das du ja ansonsten richtig ermittelt hast?  
  
Ciao,  
 Martin  

-- 
F: Was ist wichtiger: Die Sonne oder der Mond?  
A: Der Mond. Denn er scheint nachts. Die Sonne dagegen scheint tagsüber, wenn es sowieso hell ist.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Jugular]

Manchmal ist es zu einfach :D

ein einfaches
document.getElementById('ews').load();
am ende des Scripts soll ja manchmal helfen :D Dein Stichwort "switchvideo" hat geholfen. Jetzt im Nachhinein ist das was ich gemacht habe kaum anders, als die Switchvideo Funktion von deinem Link. Ich hoffe ich komme jetzt so weiter :)

Was mir an deinem Javascript-Code sauer aufstößt, ist der Umweg über setAttribute(). Ich bin nicht überzeugt, dass ein nachträgliches Ändern des Attributwerts tatsächlich auch auf das zugehörige Javascript-Objekt übertragen wird.

Warum änderst du nicht direkt die src-Eigenschaft des Objekts, das du ja ansonsten richtig ermittelt hast?

Wieso stößt dir das sauer auf?? Wie hättest du es gelöst?

MfG

[Der Martin]

Hi,

Manchmal ist es zu einfach :D

ja, das ist oft so. Warum einfach, wenn's auch umständlich geht?

Dein Stichwort "switchvideo" hat geholfen. Jetzt im Nachhinein ist das was ich gemacht habe kaum anders, als die Switchvideo Funktion von deinem Link. Ich hoffe ich komme jetzt so weiter :)

Das musst du von jemand anderem haben. Ich habe weder etwas von switchvideo erwähnt, noch etwas verlinkt.

Was mir an deinem Javascript-Code sauer aufstößt, ist der Umweg über setAttribute(). Ich bin nicht überzeugt, dass ein nachträgliches Ändern des Attributwerts tatsächlich auch auf das zugehörige Javascript-Objekt übertragen wird.

Warum änderst du nicht direkt die src-Eigenschaft des Objekts, das du ja ansonsten richtig ermittelt hast?

Wieso stößt dir das sauer auf?? Wie hättest du es gelöst?

Sagte ich doch: Die Objekteigenschaft direkt geändert. Warum einfach, wenn's auch umständlich geht? ;-)
Es ist oft so, dass nachträgliche Änderungen von Attributen nicht oder nicht korrekt ins DOM übertragen werden.

Ciao,
 Martin

[Jugular]

Das musst du von jemand anderem haben. Ich habe weder etwas von switchvideo erwähnt, noch etwas verlinkt.

Opps, sorry, wollte dich nicht fälschlicherweise loben ;) Aber hast recht, hatte jemand anderes geschrieben

Sagte ich doch: Die Objekteigenschaft direkt geändert. Warum einfach, wenn's auch umständlich geht? ;-)
Es ist oft so, dass nachträgliche Änderungen von Attributen nicht oder nicht korrekt ins DOM übertragen werden.

Steh grad auf dem Schlauch... ich muss doch das Attribut "src" ändern, damit "source" sich eine andere quelle sucht?!? oder fehlt mir mal wieder eine Mütze voll Schlaf und ich denke zu kompliziert??

grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Jugular!

Steh grad auf dem Schlauch... ich muss doch das Attribut "src" ändern,

Molily schrieb dazu http://forum.de.selfhtml.org/archiv/2013/5/t213754/#m1461950

Matthias

[Richard Rüfenacht]

Hallo Jugular

Steh grad auf dem Schlauch... ich muss doch das Attribut "src" ändern, damit "source" sich eine andere quelle sucht

Ja musst du. Lad dir das JavaScrip herunter, ganz am Schluss kannst du sehen, wie das mit switchVideo gelöst ist.

Beste Grüsse Richard

[Jugular]

Ja musst du. Lad dir das JavaScrip herunter, ganz am Schluss kannst du sehen, wie das mit switchVideo gelöst ist.

danke, hab ich selbst schon nachgeschaut... da lief meins auch schon fast, nur das "document.getElementById('ews').load();" fehlte mir eben noch :) damit geht es nun aber.

beste grüße zurück

-Jugu

[Richard Rüfenacht]

Hallo Der Martin

Bleibt nur ein ästhetisches Problem: Werden mehrere Clips hintereinander gespielt, entsteht zwischen den einzelnen Teilen immer eine kurze Pause. Dagegen kannst du aber nichts tun - erstens weißt du nicht, welchen Player der jeweilige Browser intern wirklich verwendet, zweitens können die meisten Player nicht lückenlos abspielen.

Hier geht es um das HTML5 video-Element, das *ist* der „Player“. Was ein richtiger HTML5-Freak ist, der bekommt einen Megaorgasmus schon beim Gedanken, dass er keinen externen Player, insbesondere keinen Flash-Player einbinden muss.

Das video-Element kann schon übergangslos uns ohne jede Pause abspielen, allerdings ist dafür einiges an JavaScript nötig. Beispielsweise gibt es die Möglichkeit den nachfolgende Clip mit „preload“ beim Wechsel sofort verfügbar zu machen. Die Ästhetik kann auch durch das poster-Element verbessert werden.

Ich suche beispielsweise schon lange nach einer Möglichkeit, dem Videolan Player lückenloses Abspielen von mehreren Tracks einer Playlist beizubringen; bisher habe ich keine gefunden.

Versuch dich doch mal mit dem HTML5 video-Element. Playlist kennt das auch.

Beste Grüsse Richard

[M.]

Mahlzeit,

Hier geht es um das HTML5 video-Element, das *ist* der „Player“.

Und das ist in jedem Browser und jedem Betriebssystem identisch umgesetzt? Na das wäre doch mal was :D

[Richard Rüfenacht]

Hallo M.

Und das ist in jedem Browser und jedem Betriebssystem identisch umgesetzt? Na das wäre doch mal was :D

Ja, kann man so sagen. Die optischen und funktionalen Unterschiede sind eher unbedeutend. Das Hauptproblem beim HTML5 video- und audio-Element sind die Codecs. Apple und Microsoft bestanden der Qualität wegen auf mp4/mp3, Mozilla und Opera lehnten dies wegen der kostenpflichtigen Lizenzen kategorisch ab und forcierten zunächst ogg/Theora, was aber inzwischen aus Angst vor denkbaren Patentklagen aus dem Rennen ist. Eine Lösung brachte Goggle mit dem Codec WebM für Video und Audio. Aktuell müssen also sowohl Video- als auch Audio-Dateien in je 2 Codecs eingebunden werden.

Ich bin allerdings kein Missionar für das HTML5 video-Element, dafür sind mir die interaktiven Möglichkeiten viel zu bescheiden. Andererseits finde ich diesen Weg aber ganz brauchbar, weil er in seinem begrenzten Rahmen doch ganz gut funktioniert, überall wo auch HTML5 funktioniert.

Beste Grüsse Richard