[GELÖST] Video einbauen

Sigi · 29. September 2012 17:05

Hallo!

Ich möchte gerne ein Video auf einer Seite einbauen. Dies direkt mit html5. Wenn ich das richtig lese wäre ein guter Quelltext dieser:

Hier klicken, um den Code zum Kopieren zu markieren

<video class="hide-in-ie8" controls="true" height="480" width="640">  
   <source src="myvideo.mp4" type="video/mp4" /> 
   <source src="myvideo.ogv" type="video/ogg" /> 
Ihr Browser unterstützt html5 und damit dieses Video nicht. Bitte nutzen Sie einen Browser in der aktuellsten Version.
</video>

In diesem Beispiel habe ich dann das Video unter den Dateibezeichnungen "myvideo.mp4" und "myvideo.ogv" abgelegt.

Aber irgendwie klappt das alles nicht. Ich kann den Quelltext zwar speichern und anschließend die Seite aufrufen, aber es wird lediglich der Player angezeigt, aber nicht das Video und dies obwohl der Pfad zu den Videos 100 % stimmt. Zudem finde ich es seltsam, dass wenn ich im Adminbereich die neu erstellst Seite noch einmal neu aufrufe der Inhalt, also dass was ich zuerst abgespeichert habe, gar nicht mehr da steht.

Was mache ich falsch, bzw. gibt es eine bessere Lösung ein Video für alle Browser und iPhones und iPads einzubauen?

Beitrag geändert von Sigi (30. September 2012 15:37)

Sigi · 30. September 2012 15:44

Hallo Zusammen!

Ich habe heute die beiden .mp4 und .ogv-Dateien noch einmal neu gespeichert und siehe da, es funktioniert.

Allerdings finde ich eine Sache noch merkwürdig. Wenn ich nach der Speicherung des Quelltextes aus der Seite raus gehe und dann irgendwann wieder in die Bearbeitung der Seite gehe, dann ist da im WYSIWYG-Editor, als auch beim umschalten auf den html-Code lediglich noch:

Ihr Browser unterstützt html5 und damit dieses Video nicht. Bitte nutzen Sie einen Browser in der aktuellsten Version.

zu lesen. Alles andere vom Quelltext ist weg. In der Datenbank scheint aber alles drinnen zu stehen, da ich bei Seitenaufruf auch das Video gezeigt bekomme.

Wieso sehe ich beim erneuten bearbeiten des Inhaltes nicht mehr den kompletten Quelltext, den ich am Anfang abgespeichert habe?

Klenkes · 30. September 2012 16:54

Mal so eine vorsichtige Frage...
Fügst den Videoaufruf mit eingeschaltetem TinyMCE oder Microtiny ein. Also mit WYSIWYG Editor? Oder mit abgeschaltetem Editor, im reinen Textarea-Modus?

Sigi · 30. September 2012 17:05

Im reinen Textarea-Modus.

mörml · 30. September 2012 17:35

Hallo Sigi,

mir hatte damals - was iFrames angeht - ein entsprechender Eintrag im Abschnitt tinymce.init der Datei tinyconfig.tpl geholfen. Vielleicht liegt es daran?

VG!

Sigi · 01. Oktober 2012 12:11

Also ich vermute, dass es bei mir die microtinyconfig.tpl aus dem Verzeichnis modules/MicroTiny/templates ist, oder?

Nur was soll ich da einsetzen?

faglork · 01. Oktober 2012 13:53

Moin!

Vorschlag:

Mach aus deinem Quelltext ein Plugin (welches den code per echo ausgibt), dem du den Dateinamen beim Aufruf übergibst. Der Aufruf lautet dann sinngemäß etwa so:
{myvidoeplugin vid=myvideo}

In das "Benutzerdefinierte Listenfeld" des TinyMCE baust du folgende Zeile ein:
{myvidoeplugin vid=xxx}

Diesen Aufruf kannst du dann einfach durch Auswahl einfügen. Dann auf das xxx doppelklicken und den Dateinamen eintippen.
Fertsch ...

Servus,
Alex

Sigi · 01. Oktober 2012 14:08

Hi Alex!

Der Tip von Dir scheint der Beste zu sein. Allerdings ist für mich die Umsetzung schwer. Habe ich noch nie gemacht.

Wie erstelle ich mit dem Quelltext ein Plugin und wie muss der Quelltext mit dem echo code aussehen?

Viele Grüße,
Sigi

Sigi · 05. Oktober 2012 22:06

OK, wie es scheint, bekomme ich leider von faglork keine Antwort wie das mit dem Plugin genau geht. Ich traue mich daher nicht da dran.

Daher meine Frage an mörml, wie Dein Eintrag in der tinymce.init aussah. Vielleicht kriege ich das so auf meine Sache umgebaut.

Klenkes · 05. Oktober 2012 23:08

Mir war grad' langweilig... oder es ist schon gar die beginnende senile Bettflucht, habe ich faglorks Ansatz kurz in ein Plugin gepackt.

function.myvideoplugin.php
Abspeichern im /plugins/ Verzeichnis

Hier klicken, um den Code zum Kopieren zu markieren

<?php

function smarty_cms_function_myvideoplugin($params, &$smarty)
{
if ($params['vid']) $vid = $params['vid'];
if ($params['width']) $width = $params['width'];
if ($params['height']) $height = $params['height'];

echo '
<video class="hide-in-ie8" controls="true" height="'.$height.'" width="'.$width.'">
   <source src="'.$vid.'.mp4" type="video/mp4">
   <source src="'.$vid.'.ogv" type="video/ogg">
Ihr Browser unterstützt html5 und damit dieses Video nicht. Bitte nutzen Sie einen Browser in der aktuellsten Version.
</video>'
;}

function smarty_cms_help_function_myvideoplugin()
{
  ?>
  <h3>Was macht das Plugin?</h3>
  <p>Gibt hoffentlich das Video in HTML5 aus</p>
  <h3>Wie muss ich es einsetzen?</h3>
  <p>z.B. {myvideoplugin vid="pfad_zum_video" width="640" height="480"}<br />
  Dabei aber ohne die Dateiendung, weil ein gleichnamiges .ogg vorausgesetzt wird.
  </p>
  <h3>Parameter</h3>
  <ul>
  	<li><tt>vid</tt> - Pfad zum Video</li>
  	<li><tt>width</tt> - width Wert</li>
  	<li><tt>height</tt> - height Wert</li>
  </ul>
  <?php
}

function smarty_cms_about_function_myvideoplugin()
{
?>
  <p>Author:  Bernd Klenk (klenkes)</p>
  <p>Version 0.1</p>
<?php
}
?>

Nimmt die angegebenen Parameter entgegen und setzt sie ein.
Es wird auch die Controlbar angezeigt, doch hab' ich von HTML5 Videos keine Ahnung, welcher Browser da was nun abspielt, und habe als Vorlage deinen Code aus dem Eröffnungspost genommen.

Und das dann im Tiny Custom Dropdown einsetzen:

Hier klicken, um den Code zum Kopieren zu markieren

MyVideoPlugin|{myvideoplugin vid=\"xxx\" width=\"yyy\" height=\"zzz\"}

Beitrag geändert von Klenkes (05. Oktober 2012 23:10)

Sigi · 05. Oktober 2012 23:38

Sensationell Deine Hilfe!

Es geht echt super. Jetzt verstehe ich das Ganze zum ersten Mal so richtig ... und es funktioniert. smile

Viele Grüße,
Sigi

Beitrag geändert von Sigi (05. Oktober 2012 23:56)

faglork · 05. Oktober 2012 10:59

Sorry, war ein paar Tage weg ...

ein paar Anmerkungen:

a) bei

Hier klicken, um den Code zum Kopieren zu markieren

[== php ==]
if ($params['vid']) $vid = $params['vid']; 
if ($params['width']) $width = $params['width']; 
if ($params['height']) $height = $params['height'];

würde ich noch einfügen

Hier klicken, um den Code zum Kopieren zu markieren

[== php ==]
$width = "640";
$height = "480";
if ($params['vid']) $vid = $params['vid']; 
if ($params['width']) $width = $params['width']; 
if ($params['height']) $height = $params['height'];

anstelle von 640/480 nimmst du halt deine üblichen Standardwerte. Dann musst du die Werte nur angeben wenn sie von den Default-Werten abweichen. Spart Tipparbeit.

b) falls es viele Videos werden und du die irgendwie in Ordnern verwalten willst, könntest du noch nen $dir samt default-Wert einbauen.

Servus,
Alex

nockenfell · 05. Oktober 2012 12:06

Sauber wäre der Code:

Hier klicken, um den Code zum Kopieren zu markieren

[== php ==]
$vid = isset($params['vid']) ? $params['vid'] : "";
$width = isset($params['width']) ? $params['width'] : 640; 
$height = isset($params['height']) ? $params['height']: 480;

Ist die abgekürzte Schreibweise. Zudem wird mit isset() geprüft ob der Parameter vorhanden ist. Ansonsten gibt es eine Notice Fehlermeldung.

Sigi · 05. Oktober 2012 12:19

@nockenfell: Sauber, so habe ich jetzt den Code eingebaut. Mit dem Ordner anlegen, überlege ich mir noch. Wäre eigentlich eine saubere Lösung, denn dann hätte ich einen logischen Ort für die Filme.

Nochmals vielen Dank!

kampkrusty · 05. Oktober 2012 15:00

Mal eine Zwischenfrage. Wie ist denn so die Performance bei solchen "selbst gehosteten" Videos? Ich gehe bisher immer den Umweg über google. Meine Seite ist bei 1&1 gehostet.

Sigi · 07. Oktober 2012 10:41

Sorry für die späte Antwort. War Freitag Nachmittag und Samstag weg.

Meine Domain liegt bei Deinprovider. Dort habe ich das StartWeb-Paket gebucht http://www.deinprovider.de/webpack,13.html

Aktuell habe ich zum Testen ein Filmchen in .mp4 (ca. 18.3 MB) und das gleiche Filmchen in .ogv (ca. 25,4 MB). Beide Filmchen werden rasch geladen. Bei meiner 32 mBit-Leitung ca. 4 bis 5 Sekunden und dann ruckelfrei angezeigt.

Ich habe Dir mal eine E-Mail mit dem Link zur Seite gesendet. Da kannst Du Dir ja mal die Performance im Livebetrieb ansehen.

Viele Grüße,
Sigi

kampkrusty · 10. Oktober 2012 10:07

Danke. Performance ist eigentlich ganz akzeptabel. Warum kann ich das Video aber nur im IE abspielen und nicht im FF16?

/edit
Wenn ich ein Video per html5 auf meiner Seite einbinde, habe ich den gleichen Effekt. Es handelt sich um ein mp4 Video.

Klenkes · 10. Oktober 2012 10:36

Weil meines Wissens FF kein mp4 abspielt sondern nur .webm oder .ogv haben will. Opera spielt auch kein mp4 und Safari mit IE(9+) kann NUR mp4. IE 8 kann gar nix.

Ich beschäftige mich die letzten Tage schon damit und der ganze Videomist macht mich langsam irre... mad

kampkrusty · 10. Oktober 2012 11:10

Also bleibt vorerst nur flash.

Sigi · 10. Oktober 2012 11:41

Also, ich verstehe die Aufregung nicht so ganz. Bei Safari, IE 9 und Chrome, sowie iPad und iPhone wird das .mp4 Video abgespielt und bei Firefox, Opera und auch hier Chrome das .ogv Video.

Alle anderen Browser bekommen den Hinweis das sie einen aktuellen Browser verwenden sollen und das ist nun einmal beim IE die Version 9 und nicht 8.

Hier ein Link zu "Welcher Browser welches Format unterstützt":

http://www.webdesign-podcast.de/2011/08 … -tutorial/

@kampkrusty: FF16 geht. Habe ihn auch drauf und bei mir wird das .ogv Video problemlos abgespielt.

Beitrag geändert von Sigi (10. Oktober 2012 11:42)

kampkrusty · 10. Oktober 2012 11:53

Ich halte meine Videos grundsätzlich als mp4 vor. Und beide Formate hochzuladen finde ich erstens recht aufwendig und zweitens nicht gerade Ressourcen schonend.

Sigi · 10. Oktober 2012 11:56

Dann werden die Firefox und Opera Anwender leider über die html5-Lösung auf ein schwarzes Bild schauen. ;-)

kampkrusty · 10. Oktober 2012 12:04

Hab mir das gerade mal hier angeschaut.
Es ist dann wohl doch besser auf ogg zu wechseln und alle IE Nutzer hierauf zu verweisen.

Forum für CMS/made simple

#1 29. September 2012 17:05

[GELÖST] Video einbauen

#2 30. September 2012 15:44

Re: [GELÖST] Video einbauen

#3 30. September 2012 16:54

Re: [GELÖST] Video einbauen

#4 30. September 2012 17:05

Re: [GELÖST] Video einbauen

#5 30. September 2012 17:35

Re: [GELÖST] Video einbauen

#6 01. Oktober 2012 12:11

Re: [GELÖST] Video einbauen

#7 01. Oktober 2012 13:53

Re: [GELÖST] Video einbauen

#8 01. Oktober 2012 14:08

Re: [GELÖST] Video einbauen

#9 05. Oktober 2012 22:06

Re: [GELÖST] Video einbauen

#10 05. Oktober 2012 23:08

Re: [GELÖST] Video einbauen

#11 05. Oktober 2012 23:38

Re: [GELÖST] Video einbauen

#12 05. Oktober 2012 10:59

Re: [GELÖST] Video einbauen

#13 05. Oktober 2012 12:06

Re: [GELÖST] Video einbauen

#14 05. Oktober 2012 12:19

Re: [GELÖST] Video einbauen

#15 05. Oktober 2012 15:00

Re: [GELÖST] Video einbauen

#16 07. Oktober 2012 10:41

Re: [GELÖST] Video einbauen

#17 10. Oktober 2012 10:07

Re: [GELÖST] Video einbauen

#18 10. Oktober 2012 10:36

Re: [GELÖST] Video einbauen

#19 10. Oktober 2012 11:10

Re: [GELÖST] Video einbauen

#20 10. Oktober 2012 11:41

Re: [GELÖST] Video einbauen

#21 10. Oktober 2012 11:53

Re: [GELÖST] Video einbauen

#22 10. Oktober 2012 11:56

Re: [GELÖST] Video einbauen

#23 10. Oktober 2012 12:04

Re: [GELÖST] Video einbauen

Fußzeile des Forums