html5video erweiterung

[erik_m]

Ok, es liegt leider am jQuery... Was echt ein Problem ist, brauchen wir es doch für die fullscreen slideshow im Hintergrund. Mist, so nahe dran. Hat noch jemand eine Idee wie wir barrierefrei Videos in Contao einbinden können ohne auf jQuery zu verzichten?

[ways2web]

was ist mit html5media?

gruss
ways

[Y-Nell]

html5media läuft bei mir von Anfang an ohne Probleme und ich lasse es zur Sicherheit auch parallell zu der html5video installiert. Falls html5media bei dir dennoch Probleme bereiten sollte, dann versuch es mal mit dieser Variante:

http://net.tutsplus.com/tutorials/ht...back-to-flash/

Ist zwar keine komfortable Erweiterung aber dafür bietet es ein Fallback ohne JS. Das WebM-Format kannst du natürlich noch hinzufügen.

[erik_m]

Zuerst einmal vielen Dank für Eure Unterstützung, wirklich super!

Nun haben wir heute morgen etwas seltsames gefunden: Wir binden also html5media ein um zu sehen, ob es damit geht. Erweiterung installiert, auf dem PC läufts unter ff, opera, ie, safari und chrome - so weit so gut. Also iPad angeschaltet und - es ist nach wie vor das alte Bild, und zwar wortwörtlich: Die CSS Formatierung ist auch noch die alte, dh. also es wird noch die alte Seite angezeit!

Um sicher zu stellen, dass dem auch so ist schalten wir eine ganz andere Version im Backend von Contao frei, und zwar eine mit eingebundenem YouTube Video. Cache auf allen Geräten gelöscht, der PC zeigt unter allen Browsern korrekt nun auch die Version mit Youtube Video. Auf dem iPad allerdings ist TROTZ gelöschtem cache und cookies und was auch immer wir einstellen (privates browsen etc.) immer noch das alte Bild zu sehen! Kurz gegooglet und man findet mehrere Leute mit gleichen Problemen.
Dh. also zweierlei:
1. Evtl. läuft schon alles und wir wissen es nicht
2. Wie kann man denn bitte für das iPad developen wenn man den cache nicht loswird?!?

[Y-Nell]

Hallo Erik,

falls ihr z.B. einen Mac mit MacOS 10.7 haben solltet, dann installiert das kostenlose Xcode. In dem Paket befindet sich auch ein iOS Simulator für das iPad/iPhone. Dieser lässt sich auf jeden Fall komplett zurücksetzen und bei der Darstellung und Handhabung konnte ich noch keinen Unterschied zur echten Hardware feststellen.

Ansonsten kann ich es für dich mal eben testen.

Auf meinem iPhone habe ich aber eigentlich keine Probleme mit dem Cache wenn ich etwas teste und habe ihn auch noch nie zurücksetzen müssen.

[erik_m]

Hallo Erik,

falls ihr z.B. einen Mac mit MacOS 10.7 haben solltet, dann installiert das kostenlose Xcode. In dem Paket befindet sich auch ein iOS Simulator für das iPad/iPhone. Dieser lässt sich auf jeden Fall komplett zurücksetzen und bei der Darstellung und Handhabung konnte ich noch keinen Unterschied zur echten Hardware feststellen.

Ansonsten kann ich es für dich mal eben testen.

Hallo Y-Nell,
wäre super wenn Du kurz testen könntest ob der Film bei Dir in Xcode bzw. am iPad läuft! Wir haben hier leider noch keinen Mac and dem ich es sonst testen könnte. Wirklich seltsam, vielleicht habe ich auch ein paar Einstellungen am iPad übersehen? Vielleicht auch echt unser Fehler, allerdings gibt es derer ja auch nicht soooo viele... Was mir allerdings aufegfallen ist: Auf diesem screenshot hier: http://0.tqn.com/d/browsers/1/0/X/S/...ar-cache-4.png sieht man einen "Cache Löschen" Button, den es bei mir nicht mehr gibt (letzte iOS Version)! Suche mal etwas weiter...
lG,
E

[Y-Nell]

Unter dem Link, welchen du zu Anfang angegeben hattest, ist weiterhin kein Video sichbar. Es kommt aber folgende Fehlermeldung im Safari-Debugger:

JavaScript: Log on line 25
../plugins/bgstretcher/bgstretcher.js
More than one bgStretcher

[erik_m]

Dank euch nochmals für die Hilfe, haben das Problem gelöst indem wir das html5video über ein iFrame eingebunden haben. Jetzt kollidiert nichts mehr mit dem js der seite und es funktioniert auch auf dem iPad.
lG,
E

[the_scrat]

Hallo zusammen,

da ich für ein Projekt diesen Player benötigt habe, er aber nicht das machte wie ich es wollte (z.B. Streamingproblem), hab ich das Ding einfach etwas erweitert. Zudem hab ich gleich mal auf die aktuelle videojs Datei aktualisiert und die Möglichkeit eingebaut sich die Quelle auch extern zu holen (unter Einstellungen in Contao)

http://www.contao.org/de/extension-l...000003.de.html

Würde mich über Feedback freuen. Wenn jemand Wünsche hat, einfach her damit :-)

Gruß
Michael

[juju]

Hallo,

ich habe die Erweiterung heute installiert und finde im HTML-Code oberhalb des players (ce_html5videojs-Element) folgenden Zeichencode:

&#65279

Jemand eine Idee wo das herkommt? Habe die Quelle einfach nicht finden können, um es zu entfernen.

Wenn ich den Inhalt des Templtes testweise leere, ist es übrigens nicht mehr da. Lösche ich dort nur alle Zeichen vor dem ce_html5videojs-Element wird es wieder eingefügt.

Danke und Gruß,
juju

EDIT: So schnell kanns dann gehen: Nachdem ich das öffnende php-tag gelöscht habe und es nochmal manuell hingeschrieben habe ist das Zeichen nun dauerhaft entfernt. Also erledigt. Gruß, juju

[ways2web]

mit was für einem editor öffnest du denn die templates? browser oder was externes?
wenn extern, dann speicher mal ohne BOM ab.

HTML Entity (decimal)

gruss
ways

[juju]

Hallo ways,

danke für die schnelle Antwort! Hatte den Contao-internen Editor verwendet. Hat sich aber wie inzwischen oben editiert erledigt.

Gruß,
juju

[janfux]

Hallo zusammen,

da ich für ein Projekt diesen Player benötigt habe, er aber nicht das machte wie ich es wollte (z.B. Streamingproblem), hab ich das Ding einfach etwas erweitert. Zudem hab ich gleich mal auf die aktuelle videojs Datei aktualisiert und die Möglichkeit eingebaut sich die Quelle auch extern zu holen (unter Einstellungen in Contao)

http://www.contao.org/de/extension-l...000003.de.html

Würde mich über Feedback freuen. Wenn jemand Wünsche hat, einfach her damit :-)

Gruß
Michael

Vielen Dank für die Anpassung der Erweiterung! Es funktioniert soweit alles gut, lediglich mit zwei Dingen habe ich noch Schwierigkeiten:

1. Einbindung von Inhalten per insert-tag: Ich habe eine Nachricht, in der ich ein Video einbetten möchte. Der hier im Forum am häufigsten aufgezeigte (Um)Weg ist, das Video auf einer versteckten Seite in einem Artikel anzulegen und den Artikel dann per insert-tag ( {{insert_article::ID}} ) - alternativ auch das content element direkt ( {{insert_content:ID}} ) - in die Nachricht einzubinden. Das funktioniert auch - bis auf den Flash-Fallback, der jetzt nicht mehr geladen wird, wenn die Nachricht im Newsreader gelesen wird. Das tritt zum Beispiel auf, wenn es lediglich eine MP4-Datei als Quelle gibt (Faulheit...) und man die Seite im Firefox ansieht. Dann steht zwar im Quelltext das <video> Element mit korrekter source-Angabe, der Flash-Fallback wird jedoch nicht geladen, so dass ledigleich ein Rahemn mit dem Symbol "kaputte Bildquelle" zu sehen ist. Ruft man den Artikel, in den das Video eingebunden ist, über die Frontend Vorschau direkt auf, wird der Flash-Fallback geladen. Liesse sich das beheben, so dass der beschriebene Weg über insert-tags funktioniert?
   
2. Videounterschrift: Wenn ich eine Videounterschrift vergebe, wird diese im Frontend nicht ausgegeben. Woran kann das liegen?

Ich setze die Erweiterungen html5video-js in Version 0.9.4 stable build 8 und html5video-js_ext in Version 1.0.0 beta1 build 13 auf Contao 2.10.4 ein.

Viele Grüße

Edit: Zu Problem 1: Wenn ich auf der Seite, auf der die Nachrichten dargestellt werden, das Video-js skript (<script src="http://vjs.zencdn.net/c/video.js"></script>) von Hand einbinde (z.B. ins Seitenlayout), dann funktioniert der Flash-Fallback erwartungsgemäß. Es fehlt also lediglich die Einbindung des Skriptes, wenn in einer Seite Video-content nicht direkt, sondern über ein insert-tag dargestellt wird. Vielleicht ein Anhaltspunkt.

[the_scrat]

Hallo Janfux,

sorry für die späte Antwort.
Ich schau mir deine Probleme mal an. Das mit dem externen Link kannst du auch direkt im System machen. Unter Einstellungen (in Contao) kannst du die externe Quelle anhaken. Damit werden nicht mehr die lokalen Dateien benutzt, sondern die Datei, die du bereits händisch/manuell eingebunden hast.

Das mit der Videounterschrift check ich nochmal, das kann nur am Template liegen.

edit: Jetzt hab ich das mit dem Insert-Tag verstanden. Wenn du das Video als normales Contentelement einbindest, funktioniert es wunderbar, auch mit Flashfallback, wenn du das gleiche Video jedoch per Inserttag wo anders holst, gehts nicht.
Mal schauen ob es da einen Weg gibt.

[the_scrat]

Hallo zusammen,

hab grad eine aktualisierte Version raufgeladen, kann über das ER geupdatet werden.
Videounterschrift funktioniert wieder (war ein Fehler im Template).

@janfux Hab dir deinen Wunsch mit den InsertTags eingebaut. Ist von Contao irgendwie so eigentlich nicht angedacht und der "saubere Weg" wäre es, wenn du das Element über Inhaltselement holst, dann wird auch alles korrekt eingebunden. In den Einstellungen von Contao findest du unter der Rubrik "html5video externe Quelle" noch eine neue Checkbox um die InsertTags anzuschalten. Damit wird bei JEDEM Inserttag der CSS und Javascript Link zu videojs mit eingebunden.

Habs einfach mal als Option eingebaut, obs jemand nutzt ist ne andere Frage :-) Standardmäßig ist es ja ausgeschalten.

Gruß
Michael

[bongartz120]

Hallo,

ist es möglich der Erweiterung noch die Option eines HD Videos anzufügen?

Wie es bei dieser Erweiterung umgesetzt wurden ist?

http://martin-gamnitzer.de/2010/11/h...layer-videojs/

Ich würde sehr gerne, SD und HD Videos anbieten. Oder ist es sinnvoller immer nur noch die HD videos anzeigen zulassen?

Danke

Gruß

bongartz120

[the_scrat]

Hi bongartz120,

coole Sache, schau ich mir die Tage mal an, müsste aber zu machen sein.

[bongartz120]

Cool, dass freut mich!

Danke

[the_scrat]

So, wollte grad "auf die Schnelle" mal den HD Switch einbauen, aber wie das immer so ist mit "mal Schnell", da wird das meist nix.

Die Funktion bzw. die Möglichkeit einen HD Switch zu machen, war wohl in der Version 1 von videojs noch da, nun ist aber Version 3 aktuell. Dort konnte ich keinen Weg finden soetwas zu implementieren, obwohl das echt ne coole Sache wäre.

Hab auch grad mal danach gesucht und dieses Problem ist wohl nicht nur mir aufgefallen: http://help.videojs.com/discussions/.../515-hd-option

Leider kenn ich mich in Javascript zu wenig aus, als dass ich im Quelltext nun die passende Stelle finden würde um dort selbst was reinzubasteln. Wenn jemand eine Idee hat oder etwas für die Version 3.1 findet, bau ich es sehr gerne ein.

[bongartz120]

Das ist echt schade.

Ich denke nicht das du Interesse hast hierfür eine erwiertung zu schreiben http://sublimevideo.net/. Das System hat meiner Ansicht nach ein paar gute Funktionen mehr.

[the_scrat]

Wow, das ist ja mal ein geiler Player. Der hat ja wirklich alles zu bieten. Von Playlist bis hin zu Fullscreen (im Browser) bis hin zu Fullscreen (Bildschirmfüllend). Ich glaub da muss ich mich mal dransetzen :-)

[bongartz120]

Ja der Player ist wirklich gut und kann extrem viel. Einziger Nachteil, man muss sich registrieren.

Kannst du mir ein Buch oder ähnliches empfehlen, wie man am besten das Erstellen von Erweiterungen lernen kann? Ich würde das gerne auch beherrschen. Habe jetzt schon recht viel für Conto gemacht und würde gerne ein paar Sachen als Erweiterung bereitstellen.

[tgr]

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

Der http://www.freemake.com/free_video_converter/ macht Dir sogar mit einem Schwung alle HTML5-Formate, die Du brauchst.

Grüße
Thorsten

[the_scrat]

Hi Thorsten,

das kann auch nicht funktionieren, weil der Interlake, wie ich gerade gesehen hat, einen eigenen InsertTag verwendet.

Erstell in einem Artikel (ist egal wo der liegt, vielleicht in einem nicht sichbaren Bereich) ein Video.
In deiner News gibst du dann diesen Inserttag an

{{insert_content::*}} Statt dem Sternchen nimmst du dann die ID des Contentelements. Beim Erstellen des Videos sollte die ID auch oben stehen. Damit sollte es gehen.

[tgr]

Hi Thorsten,

das kann auch nicht funktionieren, weil der Interlake, wie ich gerade gesehen hat, einen eigenen InsertTag verwendet.

Hi scrat,

Du hast geantwortet, bevor ich den Fehler korrigiert habe. Ich habe zwei Erweiterungen durcheinandergewürfelt. Mit der Interlak-Erweiterung und den insert-Tags geht alles wunderbar.

Tropsdem danke.

[icarus]

@the_scrat: Würdest du vielleicht bei Gelegenheit die short tags (<?) aus den Templates durch <?php ersetzen? Führt sicherlich nicht nur bei mir zu Ärger mit einer ansonsten prima Erweiterung und ist ja leicht zu beheben.

[the_scrat]

Hi,

hast natürlich absolut recht. Ändere ich gleich ab und lad dann ne neue Version ins ER. Danke für den Hinweis :-)

Gruß
Michael

edit: erledigt :-)

[freak_me11]

Also ich habe nun alles durchgelesen, aber das hat mir leider nicht weitergeholfen.
Bei mir funktioniert es in jedem Browser, bis auf den IE. -> Der Fallback scheint nicht zu funktionieren. Wäre super, wenn ihr mir helfen könntet.

Hier der Code:

<!-- indexer::stop --> 
<div class="ce_html5 block" id="videotest"> 
<div class="html5media"> 
<video class="video" poster="tl_files/.../test.jpg" width="900" height="508" controls="controls" preload="auto"> 
<source src="tl_files/.../test.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
<source src="tl_files/.../test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video> 
</div> 
</div> 
<!-- indexer::continue -->

[the_scrat]

Hi,

also im Quelltext wirst du da auch nix finden, wenn überhaupt wird der Fallback per Javascript nachgeladen bzw. das Flash Object eingebunden. Mit welchem IE hast du das getestet?
Ich selbst habe gerade mit dem IE7 probiert und funktioniert wunderbar. Flash wird geladen und Video wird abgespielt. Ob es im IE6 funktioniert, weiß ich nicht, ist mir eigentlich auch egal, denn wer heute mit dem IE6 noch im Internet unterwegs ist, hat es nicht verdient Videos schauen zu dürfen :-)

Hast du in deinem IE evtl. Javascript deaktiviert?

[freak_me11]

O.K. das Problem ist, dass mein Video in einem Accordion ist. Nicht als Modul, sondern nur der HTML-Code, den das Modul ausgeben würde. Dann funktioniert es nicht.

Jetzt habe ich einen anderen Code genommen. Mit dem funktioniert es soweit auch:

<div class="html5video">
  <video width="900px" height="508px" autobuffer="autobuffer" controls="controls" poster="tl_files/.../test.jpg" preload="auto">  
    <!-- if Firefox -->  
  <source src="tl_files/.../test.ogv" type="video/ogg" />  
    <!-- if Safari/Chrome-->  
  <source src="tl_files/.../test.mp4" type="video/mp4" />  
    <!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->  
  <embed src="http://.../test.mp4" type="application/x-shockwave-flash" width="900" height="508" allowscriptaccess="always" allowfullscreen="true"></embed>  
</video>
</div>

Problem ist nur, dass das Video im IE automatisch abgespielt wird, und das will ich nicht.
Und: Kann man den Fullscreen Button unten entfernen?

[the_scrat]

?? Und warum haust du in dein Accordion nicht einfach das Content Element des Video Players?

[freak_me11]

Auch das habe ich vorhin probiert, leider ohne erfolg.

Es gingt nicht das Inhaltselement mit {{insert_content::XX}} und nicht der Artikel mit {{insert_article::XX}} -> Gleiches Problem, wie bei dem kopierten HTML-Code...

[the_scrat]

Erstell doch einfach ein normales Video element und dann schachtel das in das Accordion, ganz ohne Inserttags usw.

[freak_me11]

Wie meinst du? Sry, aber mit Videoeinbindung habe ich noch nicht so viel Erfahrung...

[the_scrat]

Erstell ein neues Element und wähle statt "Text" einfach html5video aus, mach deine Einstellungen und fertig. Woher hast du denn den Code von oben? Hast du den selbst geschrieben?

[freak_me11]

Ah, O.K.

Problem:
Das Akkordeon das ich verwende ist ein jQuery Akkoredeon und keine Erweiterung von Contao. -> Diese komplette Seite besteht aus einem HTML-Element:
Akkordeon-Element1:
Texte, Bilder
Akkordeon-Element2:
Video
Test
Akkordeon-Element3:
Text

Und da muss ich nun das Video richtig integrieren. Problem eben mit der Erweiterung ist, dass der Fallback nicht funktioniert. Funktioniert aber einwandfrei, wenn ich ein Inhaltselement erstelle - also unabhängig von der Seite, die nur aus dem HTML-Element besteht. Ich habe also die Erweiterung genutzt, mir den HTML-Code aus dem Frontend kopiert und es in mein Akkordeon eingefügt. Funktioniert alles, bis auf den Fallback. Dann habe ich versucht das Inhaltselement einzubinden mit {{insert::...}} - selbes Problem.

Also habe ich nach Code für HTML5-Videos gesucht

Den Code von oben habe ich von den Seiten:
http://camendesign.com/code/video_for_everybody
http://net.tutsplus.com/tutorials/ht...back-to-flash/

[the_scrat]

Das brauchst du alles nicht, ich kann dir schon sagen warum das nicht funktioniert, weil die videojs Datei nicht geladen wird, demnach gibt es kein Fallback, weil das Javascript nicht geladen ist.
Integrier einfach das Video ContentElement, den Rest erledigt das Modul ohne, dass du irgendwas händisch machen musst. Dann sollte es sogar mit dem IE funktionieren.

Installier dir vielleicht auch mal die html5videojs_ext das ist die aktuelle Version von videoJS. Und du hast ein paar zusätzliche Features, unter anderem auch das mit dem Autoplay usw.

[freak_me11]

Ich kann wie gesagt leider kein Inhaltselement erstellen und dieses in das Akkordeon einfügen. Weil das Akkordeon ein HTML-Inhaltselement ist. D.h. ich muss irgendwie in den HTML Code das Video einbinden.
Wie würde das bei dir aussehen?

[freak_me11]

So sieht der Code aus, wenn ich ein normales Inhaltselement erstelle:

<section class="ce_html5videojs block">
<figure class="ce_html5videojs">
<div class="video-js-box">
<video id="videojs1107" class="video-js vjs-default-skin" style="background-color:#fff;" width="900" height="508" poster="tl_files/.../test.jpg">
	    	<source src="tl_files/.../test.mp4" type="video/mp4" >
		    	<source src="tl_files/.../test.webm" type="video/webm">
		    	<source src="tl_files/.../test.ogv" type="video/ogg">
			<img src="tl_files/.../test.jpg" width="900" height="508" alt="videojs1107" title="videojs1107"></video>
</div>
</figure>

<style type="text/css" media="screen">
#videojs1107 .vjs-controls .vjs-fullscreen-control {display:none!important;}</style>

<script>_V_("videojs1107", {"controls": true, "autoplay": false, "preload": true}).ready(function(){
var Playervideojs1107 = this;
  Playervideojs1107.volume();
});
</script>
</section>

Wenn ich diesen Code aber in das Inhaltselement "Eigener HTML-Code" einfüge, dann funktioniert es nicht...

[the_scrat]

Das kann auch nicht funktionieren, weil dann das nötige Javascript nicht mehr geladen wird. Hör auf mit dem Eigenen-HTML Quatsch, zumindest nicht für solche Sachen.
Es gibt in Contao ein Inhaltselement Accordion. Wähl das aus. Darin platzierst du dann das ContentElement Video und fertig. Dann hast du dein Accordion und das Video ohne auch nur eine Zeile selbst schreiben zu müssen.
Wieso nutzt du überhaupt ein CMS wenn du alle Bausteine selbst per HTML einfügst? Dann bau dir deine Seite doch gleich manuell...Dafür gibt es ja die Elemente in Contao, damit du einfach nur auswählen, Einstellungen erledigen und speichern klicken musst.