html5video erweiterung

[Bennie]

Hallo ich habe mal die html5video-js -extension ausprobiert http://www.contao.org/erweiterungsli....90039.de.html.

Hat die schon jemand mit dem Flash-Fallback zum Laufen gebracht? Ich glaube da ist noch ein Fehler drin, denn er meckert immer, dass er das mp4 Fallback-Video nicht streamen kann.
Gebe ich ins Template der Extension den Pfad direkt ein, klappt es.
Es wird ja hier auf den flowplayer zurückgegriffen, aber irgendwie scheint da was mit der Pfadanweisung nicht zu klappen. Die html5 Einbindung klappt problemlos.

LG
Bennie

[Bennie]

...oder anders gefragt, welche html 5 Videoerweiterung mit Flashfallback bevorzugt ihr?
Wenn ich übrigens den HTML5 Video Player von http://videojs.com/ per Hand einbinde geht das einwandfrei, deshalb wunderte ich mich, dass das bei der Extension nicht ging, die basiert ja darauf....

LG
Bennie

[renderART]

Hallo,
kannst du mal eine Seite angeben wo das der Fall ist?? Dann kann ich mal schauen..
Benutzt du Static Domains (also eine extra Domain für Bilder)?
Mit welchem Program hast du das MP4-Video erstellt? Da hatte ich schon festgestellt, dass der Flowplayer bzw. Flash nicht mit jedem MP4-Format zurecht kommt.

Grüße aus Stuttgart,
Arne

[Bennie]

Leider kann ich das nicht, da ich noch auf localhost entwickle. Es liegt jedenfalls nicht am mp4 Format, denn mit dem "ch_flowplayer Extension" geht es. Ich hatte auch schon Schwierigkeiten mit mp4, was aber am falschen Codec lag. Ich habe einfach mal ein Testvideo mit xmediarecode konvertiert - einem Freeware Tool. Der Flowplayer an sich hat damit keine Schwierigkeiten, ich vermute es liegt am Pfad

Die Fehlermeldung die ich bekomme besagt ja, dass er es nicht streamen kann, so als ob der Pfad nicht stimmt. Daraufhin habe ich im Template des Moduls einfach mal den Pfad direkt angegeben - das ging. Bin kein Coder, aber vielleicht hilft der Hinweis schon.
Finde das Modul sonst nämlich perfekt für meinen Zweck, vielen Dank an dieser Stelle an Dich Arne

LG
Bennie

[Bennie]

Habe nochmal einiges ausprobiert, leider geht das Fallback bei mir nicht. Gibt es dazu schon Neuigkeiten??

LG
Bennie

[crebase]

muss mich dem leider anschließen. Der Flowplayer spielt das gleiche Video ohne Probleme ab, aber mit der Fallback Lösung gelingt dies leider nicht.

[renderART]

Könnt ihr mir mal den einen Ausschnitt vom Quellcode hier posten?? Dann kann auf Scriptfehler geprüft werden..
Sind Static-Domains angegeben?? Wurde die Videotypen mit AddTyp im Server angegeben (wobei das eigentlich nur den HTML5 video playback betrifft)? Es gibt dann noch das Crossdomain-Problem bei Flash (sofern Static-Domains verwendet werden).. Es muss dann eine crossdomain.xml Datei im Rootverzeichnis erstellt werden..

Ich hatte ähnliche Probleme am Anfang, allerdings ging es dann nach einigem rumtüfteln ... Ich werde die Tage mal eine neue frische Testumgebung aufsetzten und dann schauen...
Meine Vermutung ist, dass das an den Servereinstellungen liegt...

Arne

[Bennie]

Sorry hatte das erst heute wieder gelesen hier. Ich setze es nämlich auch gerade nochmal neu auf, sobald ich den Fehler wieder habe werde ich den Quellcode posten.

LG
Bennie

[lindu]

Hi

Also ich habe da auch einige Prbleme mit dem Fallback.

Die kann mich der bisherigen Erkenntnis anschliessen.

- Videotyp ist hinzugefügt
- Mutlidomain installaion, aber auch Single - bei beiden der Fehler da

Wenn ich es im einzeln publiziere, funkioniert's.

Wenn ich nun den mittels meinem Testrechner mit IE8 die Seite öffne habe ich einen Screenshot hier angefügt.

Codeausgabe von dem IE8 Rechner

<div class="ce_html5videojs g6 ce_text">
<div class="video-js-box">
	<video id="html5video3321" class="video-js" width="415" height="250" controls="controls" preload="auto" autoplay="autoplay" poster="system/html/cloud-video-bf3e9ec5.jpg">
		<source src="tl_files/video/Cloud_Computing.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
		
		
		
		<object class="vjs-flash-fallback" width="415" height="250" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="flashvars" value='config={"playlist":["system/html/cloud-video-bf3e9ec5.jpg", {"url": "tl_files/video/Cloud_Computing.mp4","autoPlay":false,"autoBuffering":false,"scaling":"fit"}]}' />
		<img src="system/html/cloud-video-bf3e9ec5.jpg" width="415" height="250" alt="Das Gerät unterstützt keine HTML5..." title="Das Gerät unterstützt keine HTML5..." />		</object>
	</video>
	<p class="vjs-no-video"><strong>Download Video:</strong>
		<a href="tl_files/video/Cloud_Computing.mp4">MP4</a>	</p>
</div>
</div>
<script type="text/javascript"> 
	VideoJS.DOMReady(function(){
		var html5video3321 = VideoJS.setup("html5video3321", {
			controlsBelow: false,
			controlsHiding: true,
			defaultVolume: 0.5,
			useBuiltInControls: false,
			controlsAtStart: false,
		});
    });
</script>
 

was ich noch ausprobiert habe: in den Dateien ( ce_html5videojs.xhtml & ce_html5videojs.html5) unter /httpdocs/system/modules/html5video-js/templates die releases angepasst

von data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" zu data="http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf" jeweils angepasst, dies hatte keine Auswirkung.

danke euch im voraus

grüsse.lindu

[Y-Nell]

Hallo,

ich kämpfe zur Zeit auch mit dem Fallback im IE8. Mehr durch Zufall habe ich auf der entsprechenden Seite noch ein Video mit der html5media-Erweiterung (Version 1.0.2 stable Build 4) eingebunden. Oh Wunder, jetzt wird das html5video-js Video problemlos abgespielt.

Ich bin kein JS-Experte aber evtl. habe ich den Fehler einkreisen können. Und zwar funktioniert das ganze nicht mehr sobald folgende Datei nicht geladen wird:

/plugins/html5media/html5media.min.js

Das der html5media-Player dann nicht mehr funktioniert ist natürlich verständlich. Versuchsweise habe ich html5media.min.js bei den <head>-Tags eingetragen, was aber nicht funktioniert hat.

Gruß

Y-Nell

[Bennie]

Also mein Quelltext unterscheidet sich prinzipiell auch nicht von dem hier bereits geposteten. Habe noch einiges probiert, aber es hat leider nicht funktioniert. Vielleicht meldet sich Arne nochmal zu dem Thema, wir anderen sind ja anscheinend ratlos ;-).

Grüße
Bennie

[renderART]

Nachdem ich die letzte Zeit wegen einem umfangreichen Ausbau einer Serverinfrastruktur mit Virtualisierung (das ist mal ne ziemlich coole Sache ;-) eines Kunden einfach nicht dazugekommen bin, weder an meiner neuen Internetseite noch an irgendwelchen Contao-Extensions rumzubasteln hab ich heut endlich mal etwas Zeit dafür..

Ich konnte das Problem mit dem Flowplayer eingrenzen. Es funktioniert wenn man für die Files eine Static-Domain eingetragen hatte. Es ist eine Problem wie das object-Tag die Urls liest bzw. Flash relative Urls zusammenbaut.
Ich habe das jetzt entsprechend geändert, so das eine absolute URL im Template zusammengebaut wird ($this->flashBase übergibt die Domain-URL wenn keine Static-Domain für File angegeben ist). Außerdem habe ich noch die flowplayer-*.flv mit eingebunden, damit diese von der eigenen Domain und nicht von releases.flowplayer.com geladen wird. Wer da was ändern möchte kann das Template entsprechend nach seinen Wünschen ändern.

Ich mache noch einen letzten Test gleich mit der neuen 2.10.3-Version. Die neue Version 0.9.4 von html5video-js wird also demnächst im Repository erscheinen.

Arne

[Bennie]

Erst mal vielen Dank für Deine Bemühungen. Leider kann ich noch keine positive Rückmeldung geben. Die Fehlermeldung bekomme ich nach wie vor, wobei auffällig ist, dass innerhalb der Fehlermeldung die ja den Pfad anzeigt, hinterm http drei anstatt zwei slashes stehen . Rufe ich das Ganze im IE 8 auf hagelt es Fehlermeldungen (sribtdebugging im IE eingeschaltet) was auf Fehler im JS hinweist.
Ich weiß, das ist jetzt alles sehr unspezifisch, aber nach erstem Test (Neuinstallation des Moduls) kam das leider so raus.
Ich teste weiter um Genaueres sagen zu können.

LG
Bennie

[BA04]

Nach Anpassung der Variable flashBase in HTML5VideoJS.php klappts bei mir auch ohne Static Domains

$this->Template->flashBase = (TL_FILES_URL) ? '' : 'http://' . $this->Environment->host . '/';

Grüsse
Roger

[renderART]

Na, so nen mist.

OK, dann werde ich jetzt mal ne neue Contao-Test-Installation vornehmen. Auf meiner Development-Umgebung für meine neue Seite bekomme ich es fast nicht 'nicht' zum laufen (heißt ich kann ziemlich viel rummruksen bis es dann mal nicht mehr tut ;-) Aber Spaß beiseite - ich dachte eigentlich das ich nicht so viele spezielle Anpassung da habe..
Ich meld mich zurück mit ein paar Ergebnissen meiner Tests..

Arne

[renderART]

So, habs jetzt nochmal korrigiert. Hatte nen kleinen Denkfehler drin.
Danke an Roger.

Allerdings hab ich es jetzt mit relativen Pfaden gemacht.
Getestet auf einer frischen Contao Installation auf aktuellem Firefox, IExplorer 9 und 7, mit Url-Rewrite und ohne.

Arne

[lindu]

Superdank...!

Ich habe die Erweiterung upgedatet und nun funktioniert das Fallback. :-)

Danke an alle Mitwirkenden.

Gruss lindu

[Nina]

Wofür wird bei dieser Erweiterung eigentich genau das ogg-Format gebraucht? Sprich: Welche Art von Besucher werden nicht abgedeckt, wenn ich ogg weglasse?

Und kennt hier jemand einen brauchbaren Freeware-Konverter der mp4 / webm / ogg beherrscht?

[Arno]

Und kennt hier jemand einen brauchbaren Freeware-Konverter der mp4 / webm / ogg beherrscht?

Beschäftige mich auch gerade mit dem Thema. Habe jetzt gerade allerdings die html5media Erweiterungen installiert und die funktioniert tadellos. Reicht für meine Zwecke glaube ich aus.

Als Konverter scheint mir der hier http://www.mirovideoconverter.com/ recht vielversprechend. Tut jedenfalls was er verspricht und beherrscht zur Abwechslung wirklich alle drei HTML5 relevanten Formate.

[herrweiss]

Ich benutze auch den Miro Video Converter. Die Ergebnisse sind brauchbar.

@Nina
Das *.ogg Format benötigst Du für Firefox.

[Y-Nell]

Der von Arno beschriebene Miro Converter sollte für die meisten Anwendugen ausreichen.

Mit dem VLC kann man auch Konvertieren oder FFmpeg, der auch im Miro verwendet wird.
Das Problem sind weniger die MP4-Dateien als vielmehr OGV und insbesondere WebM,
da nicht alle Konverter diese Formate unterstützen. Hier bietet sich die Firefogg Erweiterung an.
Ansonsten gibt gibt's noch die Online-Universallösung www.online-convert.com.

[Bennie]

Wie sieht's denn aus geht es bei euch nun? Bei mir hat sich nichts geändert und die schon beschriebene Fehlermeldung bei eingeschaltetem "Skriptfehler anzeigen" im IE habe ich auch noch.
Nur um sicher zu gehen, dass es wohl leider mal wieder einer meiner Einzelfälle ist, würde ich gerne wissen ob es bei den anderen Testern jetzt reibungslos läuft.

Grüße
Bennie

[Y-Nell]

Bei mir hat das Update geholfen.

[varix]

Hallo,

habe die Erweiterung gerade probehalber bei mir eingebunden (Contao 2.10.3) und es funktioniert.

Im FF(8.0) und im IE7 & 8 wird das Video im Flowplayer abgespielt.Und auf meinem Iphone kann ich den Film (mp4) auch sehen. Allerdings funktionert die Autoplayfunktion im Flowplayer wohl nicht.

Grüße
varix

[Y-Nell]

Meinst du das Autoplay in allen Browsern oder in iOS? Denn in iOS wird Autoplay seitens Apple absichtlich blockiert.

[varix]

Kurz getestet:

Autoplay läuft: Safari (5.1.1), IE9
Autoplay läuft nicht:IE 7 & 8, FF (8.0), iOS

varix

Nachtrag: Bei mir ist ein Bild verlinkt, dass eine Lightbox öffnet, in dem das Video abgespielt wird. Dieser Übergang scheint iOS (zumindest auf dem Iphone) nicht zu mögen. Ohne Lightbox war alles gut.

[Y-Nell]

Bei mir ist es quasi ähnlich:

Autoplay läuft: FF 8.01, aktueller Safari und Chrome (alles Mac) und IE9

Im Opera 11.52(Mac) startet Autoplay aber man hört nur den Ton und das Poster ist sichtbar. Wenn man einmal stopt und wieder auf Play klickt,
startet das Video normal weiter.

Kein Autoplay: IE 6,7 & 8

[Bennie]

So ich habe mir jetzt mal die HTML5VideoJS.php angesehen und in Zeile 99 den Eintrag ohne ../../ geändert, dann geht es sofort.
Aber nur im Firefox, im IE geht es dann nicht mehr, da sucht er jetzt nach der js Datei.
Das war auch genau das Problem meiner Fehlermeldung, dass dort immer tl_files/../.. stand. Dort liegt aber nun mal das Video nicht. Wo ist da jetzt bei mir der Fehler der bei euch nicht ist? Das Pfadproblem bekomme ich nicht in den Griff

Das Problem mit den Fehlermeldungen im IE habe ich aber auch nach wie vor . Das fängt gleich an mit "Fehler: Bezeichner,Zeichenfolge oder Zahl erwartet." Will ich dann das Video starten kommt : 'null' ist Null oder kein Objekt.
Das liegt wohl am JS des Players, denn die anderen Seiten generieren den Fehler nicht.

Es scheint sicher ein Verständisproblem meinerseits zu sein, aber letztendlich habe ich lediglich die Erweiterung installiert und die Schritte im Backend abgearbeitet. Hat denn mal jemand den IE mit der Option "Skripfehler anzeigen" getestet?

LG
Bennie

[BA04]

Die Skriptfehler im IE lassen sich im Templatefile ce_html5videojs beheben:

Das Flash Fallback Objekt benötigt noch eine eindeutige id also:

<?php if (!$this->noflashfallback): ?>
		<object id="eineindeutigername" class="vjs-flash-fallback" width="<?php echo ....

Zudem hat sich noch ein Komma zuviel eingeschlichen, und zwar in der letzten Zeile der VideoJS.DOMReady Function am Ende der Zeile von controlsAtStart. So ist's richtig:

			defaultVolume: <?php echo $this->volume; ?>,
			useBuiltInControls: <?php echo $this->builtincontrols; ?>,
			controlsAtStart: <?php echo $this->controlsstart; ?>
		});
    });

Ich weiss nicht, ob es ogv heute noch benötigt. Mit webm und Flash Fallback sollte man durchkommen (http://www.youtube.com/html5). Die Prüfung der Formate sollte jedoch in der Reihenfolge sein, dass webm vor ogv bevorzugt wird. Momentan noch verkehrt.

Gruß
Roger

[Bennie]

Danke Roger, das hat schon mal funktioniert. Einen Skriptfehler im IE bekomme ich noch wenn ich auf Download als MP4 klicke, aber das finde ich ohnehin unnötig, für meine Zwecke würde ich diese Zeile aus dem Template löschen, aber das ist nur meine Meinung ;-)

Bleibt noch die Sache mit dem Pfad in der HTML5VideoJS.php.
Mein Contao Verzeichnis heißt contao210 und das Video liegt direkt in "tl_files" - wenn also nun Fallback greift, meckert er, dass er http://localhost/contao210/../../tl_files/video.mp4 nicht aufrufen kann.
Deswegen hatte ich eben ../../ entfernt. Warum überhaupt diese Verschachtelung zwei Verzeichnisse tiefer?

Danke für eure Bemühungen, das will ich an dieser Stelle auch mal loswerden, immer nörgeln ist schließlich einfach ;-)

Grüße
Bennie

[renderART]

Ich habe mir jetzt nochmal das mit den Skriptfehlern im IE angeschaut. Das ist ein Bug vom Flowplayer, der aber wie von Roger bereits geschrieben, mit einer ID im object-Tag behoben bzw. umgangen werden kann. Das habe ich im Template korrigiert.

@Bennie
Poste doch mal bitte den Ausschnitt mit dem html5video des Quellcodes deiner Seite.
Hast du irgendwelche besonderen Anpassungen vorgenommen? Das Template ist für eine Standard Contao-Installation
Hast du das Template angepasst? Du kannst mal versuchen unter 'Systemwartung' alle Temporären Daten zu bereinigen, sonst werden manchmal die Templates nicht aktualisiert..
Der relative Pfad mit '../../' kommt deswegen zustande, da vom Verzeichnis wo die swf-Datei liegt ausgegangen wird. Und da diese in 'plugins/html5video' liegt, müssen wir erst zwei Ebenen hoch um in tl-files zu kommen. Es ist daher sehr eigenartig das bei dir noch http://localhost/.. davor steht. Hast du contao auf einer wamp-Installation unter Windows laufen. Da könnte auch das Problem liegen..

Die Erweiterung ist getestet mit IExplorer 7, 8, 9, Chrome, Firefox und läuft bei mir auf einer Linux/Apache Umgebung (http://dev.arne-stappen.de).


Arne

[Bennie]

@Arne
Vielen Dank für die Änderungen. Das Pfadproblem besteht noch und ich habe das unter xampp auf Windows laufen, daher localhost.
Verändert am Template habe ich nichts -

Poste doch mal bitte den Ausschnitt mit dem html5video des Quellcodes deiner Seite.

<div class="ce_html5videojs block">


<div class="ce_html5videojs">
<div class="video-js-box">
	<video id="html5video3533" class="video-js" width="500" height="400" controls="controls" >
		<source src="tl_files/VIDEO0025_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
		
		
		
		<object id="fallback-html5video3533" class="vjs-flash-fallback" width="500" height="400" type="application/x-shockwave-flash" data="plugins/html5video-js/flowplayer-3.2.7.swf">
			<param name="movie" value="plugins/html5video-js/flowplayer-3.2.7.swf">
			<param name="allowfullscreen" value="true">
			<param name="flashvars" value='config={"playlist":[{"url": "tl_files/VIDEO0025_1.mp4","autoPlay":false,"autoBuffering":false,"scaling":"fit"}]}'>

		</object>
	</video>
	<p class="vjs-no-video"><strong>Download Video:</strong>
		<a href="tl_files/VIDEO0025_1.mp4">MP4</a>	</p>
</div>
</div>
<script type="text/javascript">
	VideoJS.DOMReady(function(){
		var html5video3533 = VideoJS.setup("html5video3533", {
			controlsBelow: false,
			controlsHiding: true,
			defaultVolume: 0.9,
			useBuiltInControls: false,
			controlsAtStart: false		});
    });
</script>


</div>

Der einzige Skriptfehler den ich noch bekomme ist der schon erwähnte:

Einen Skriptfehler im IE bekomme ich noch wenn ich auf Download als MP4 klicke....

LG
Bennie

[ways2web]

gibt es hierfür schon eine Lösung mit dem pfadproblem?
IE6-8 macht auch mir probleme.. zumindest mit dem ietester.. mein windows eigner IE9 macht alles wie gewünscht

gruss
ways

[erik_m]

Hallo,
wir versuchen hier ebenfalls die html5video Erweiterung zum Laufen zu bewegen - funktioniert im FF, IE, chrome, opera und safari alles auch tadellos (inklusive fallback) - nur auf dem iPad nicht. Da sieht man nur einen schwarzer Bildschirm. Finde ich insofern seltsam, als dass der direkte Link zum Video (direkt in die Adressleiste von Safari) wunderbar funktioniert, dh. es kann an der Codierung des Videos eigentlich nicht liegen. Ebenfalls läuft der Film unter Safari tadellos, nur eben auf dem iPad gibt es Probleme. Ich habe auch schon die .htaccess Datei um AddType video/mp4 .mp4, AddType video/webm .webm und AddType video/ogg .ogv erweitert, ändert leider nix.

Bisher ist die Seite noch im Versuchs-Stadium, die Probeseite mit dem oben beschriebenen Problem findet ihr hier: http://k18.at/new/index.php/featured.html

Hat jemand eine Idee was mein Fehler ist?
lG und vielen Dank im Voraus,
E

[Y-Nell]

Hallo Erik,

ich habe die Seite im iOS Simulator jeweils unter 4.3.2 und 5.0 getestet und konnte dein Problem nachvollziehen. Das Video per direktem Link läuft wie von dir beschreiben problemlos.

In einem aktuellen Projekt von mir, läuft die Erweiterung problemlos in iOS. Ich kann jetzt auch nur Vermutungen anstellen aber evtl. stört eines der anderen Javascripts. Hast du die Seite dahingehend schon getestet?

LG

Y-Nell

[erik_m]

Hallo Erik,

ich habe die Seite im iOS Simulator jeweils unter 4.3.2 und 5.0 getestet und konnte dein Problem nachvollziehen. Das Video per direktem Link läuft wie von dir beschreiben problemlos.

In einem aktuellen Projekt von mir, läuft die Erweiterung problemlos in iOS. Ich kann jetzt auch nur Vermutungen anstellen aber evtl. stört eines der anderen Javascripts. Hast du die Seite dahingehend schon getestet?

LG

Y-Nell

Hallo Y-Nell, erst einmal vielen Dank für die schnelle Antwort! Das mit den java-scripts kann natürlich sein, wie kann ich das am besten de-buggen? Sorry, bin nicht wirklich beschlagen was web-entwicklung angeht
Wenn es ein javascript-Konflikt ist würde der denn dann nicht auch unter Safari Probleme geben? Ich mach mich mal auf die Suche...

[Y-Nell]

Versuch einfach auf der Seite soviele Scripts wie möglich wegzulassen und füge eins nach dem Anderem wieder hinzu. Selbst hinzugefügte Scripts z.B. im Header einfach mal auskommentieren.

Ich zu testen ob die Erweiterung überhaupt bei dir in iOS funktioniert, würde auch eine Testseite ausreichen in der du nur das Video eingebunde hast. Wenn es dann laufen sollte, müsste der Fehler mit Sicherheit bei einer der Erweiterungen sein bzw. bei den von dir hinzugefügten.

[Bennie]

Da das Thema hier mal wieder aufgegriffen wurde , würde ich gerne wissen ob es da Neuigkeiten gibt. Die von mir am 02.12 beschrieben Probleme bestehen leider weiterhin, der IE macht nach wie vor Probleme.

@erik_m und @Y-Nell
Das Pfadproblem hattet ihr aber nicht ?


LG
Bennie

[Y-Nell]

Hallo Bennie,

ob's zu Anfang an dem Pfad lag, kann ich nicht sagen, da ich mir die Mühe nicht gemacht habe dies zu testen.
Seit dem/den letzten Update(s) lief hier zumindest alles ohne Probleme.

Gruß

Y-Nell

[erik_m]

@erik_m und @Y-Nell
Das Pfadproblem hattet ihr aber nicht ?
LG
Bennie

Hi Bennie, nein, das hat bei uns hier überhaupt keine Probleme bereitet. Wie gesagt, es funktionierte auf praktisch allem direkt vom Start weg alles tadellos - bis auf das iPad halt...
Dank Dir, Y-Nell, ich versuche mal die javascripts der Reihe nach wegzulassen und schaue was passiert.