moziloCMS Supportforum

moziloCMS => Plugins => Thema gestartet von: azett am 11. Juni 2016, 22:53:17

Titel: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 11. Juni 2016, 22:53:17
Hallo zusammen,

für die Einbindung von Audio- oder Videodateien in moziloCMS stehen mit dem MP3-Player (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=274) und dem FlayrPlayer (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=186) bisher nur Flash-basierte Plugins zur Verfügung. Da Flash aber von immer weniger Browsern (und Anwendern!) unterstützt wird und auf Mobilgeräten nicht immer sauber funktioniert, habe ich ein Player-Plugin geschrieben, das ohne Flash funktioniert: Den Audio- und Videoplayer (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=288).

Das Plugin unterstützt folgende Dateiformate:
Das Rendern des Players liegt beim Browser. Für die Audioformate wird ein Player mit Kontrollelementen (Play/Pause, Lautstärke) erzeugt. Der Player für die Videoformate bekommt keine Breite und Höhe vorgegeben - der Browser rendert ihn einfach so groß wie das Video.
Die Player lassen sich über die CSS-Klasse audiovideo optisch verändern; eine Rumpf-CSS-Datei mit den passenden Selektoren liegt dem Pluginverzeichnis bei.

Download:
Hier im Pluginarchiv (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=288)

Dokumentation:
Auf arvidzimmermann.de (http://www.arvidzimmermann.de/index.php?cat=moziloCMS-Plugins&page=Audio-%20und%20Videoplayer)

CMS-Version:
Ich habe das Plugin unter moziloCMS 1.12 und 2.0 getestet.


Lasst mich bitte wissen, ob alles sauber funktioniert.

Beste Grüße
Arvid
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 14. Juni 2016, 21:45:52
MarcAurel kommentierte im Pluginarchiv (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=288):
ZitatIch habe heute bei einem Test auf einem Server ohne die Funktion ,,mime_content_type"  einen Fehler vom Plugin bekommen.  Die Funktion ist auch als ,,deprecated" markiert, eine  Ersatz-Funktion wie 'finfo_open' war auch nicht vorhanden. Ich würde vorschlagen statt ,,mime_content_type" die folgende Funktion aufrufen um unschöne Abstürze zu vermeiden:

function _mime_content_type($filename) {
      if(function_exists('mime_content_type')) {
         return mime_content_type($filename);
      }
      elseif (function_exists('finfo_open')) {
            $finfo = finfo_open(FILEINFO_MIME);
            $mimetype = finfo_file($finfo, $filename);
            finfo_close($finfo);
            return $mimetype;
      }
      else{
          $mime_types = array(
            // audio
            'mp3' => 'audio/mpeg',
         'ogg' => 'audio/ogg',
         'wav' => 'audio/wav',
         //video
         'mp4' => 'video/mp4',
         'webm' => 'video/webm',
         );         
         $ext = strtolower(array_pop(explode('.',$filename)));
         if (array_key_exists($ext, $mime_types)) {
            return $mime_types[$ext];
         }         
         else {
            return 'unknown/unknown';
         }
      }
   }
Danke für den Hinweis, ich habe das in angepasster Form eingebaut.

Frage in die Runde: Wärt ihr so gut und könntet den angehängten Stand nochmal auf unterschiedlichen Umgebungen testen? Wenn alles sauber läuft, tät ichs dann als neue Version veröffentlichen.

Danke!
Arvid
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: bemerkenswelt am 14. Juni 2016, 23:24:46
Zitat von: azett am 14. Juni 2016, 21:45:52
Wärt ihr so gut und könntet den angehängten Stand nochmal auf unterschiedlichen Umgebungen testen?

Läuft im Prinzip prima.
Video: mp4, Provider: UD-Media, PHP: 5.6

Nur leider ist vom Bild nur die linke Hälfte zu sehen, da das Video breiter ist, als der content Bereich.
Könnte man das noch in die plugin.css einbauen, damit ich, als CSS Anfänger, nicht darin rumschrauben muss (und MarcAurels Hinweis einbauen)?

Link zu meiner Testseite hier > (http://bemerkenswelt.de/test/test.html)
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 15. Juni 2016, 07:33:46
Danke für den Hinweis, die plugin.css sieht nun so aus:.audiovideo {
/* Sowohl für Audio- als auch Videoplayer: Nicht breiter als der Inhalt! */
max-width: 100%;
height: auto;
}
audio.audiovideo {
/* Audioplayer hier nach Belieben stylen */
}
video.audiovideo {
/* Videoplayer hier nach Belieben stylen */
}

Dann passts?


Abgesehen davon: Ich würde auf meiner Website gern eine kleine Demo des Players zeigen - kennt wer eine zuverlässige Quelle für freie (!) kurze Audio- und Videoclips?

Danke und Gruß
Arvid
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: bemerkenswelt am 15. Juni 2016, 09:32:48
Guten Morgen,
und Vielen Dank.

Ich möchte nicht nerven, aber mir kommt da noch eine Frage:
Wäre es möglich einen für Laien begehbaren Weg einzubauen, um dem Player zu sagen, dass er per Autostart sofort beginnen soll?

Evtl. so wie im Galerie Plugin ColorBox. Da kann ich auf der Seite mit Parametern ja jeweils individuell einstellen, ob zum Beispiel Slideshow auf auto steht oder nicht. Könnte dann in diesem Fall vielleicht so aussehen: {audiovideo|Kategorie:dateiname.mp3,autostart}
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: bemerkenswelt am 15. Juni 2016, 17:56:00
Zitat von: azett am 15. Juni 2016, 07:33:46
Danke für den Hinweis, die plugin.css sieht nun so aus:.audiovideo {
   /* Sowohl für Audio- als auch Videoplayer: Nicht breiter als der Inhalt! */
   max-width: 100%;
   height: auto;
}
audio.audiovideo {
   /* Audioplayer hier nach Belieben stylen */
}
video.audiovideo {
   /* Videoplayer hier nach Belieben stylen */
}

Dann passts?

Hallo,
hab's gerade nochmal runtergeladen, aber Breite/Höhe ist in der plugin.css noch nicht drin.
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: MarcAurel am 19. Juni 2016, 09:13:00
Zitat von: bemerkenswelt am 15. Juni 2016, 17:56:00

hab's gerade nochmal runtergeladen, aber Breite/Höhe ist in der plugin.css noch nicht drin.

Man sollte dem Plugin die gewünschte Breite als Parameter übergeben können, die Höhe passt sich dann automatisch an, wenn die weitere Eigenschaften wie unten vorhanden sind.
Die Breite sollte man direkt per Script als CSS Eigenschaft schreiben:

video { 
        width:100%;
        max-width:500px;
        height:auto;
    }

Man kann natürlich auch ein Parameter "autoplay" übergeben können, es würde so aussehen:

<video controls autoplay>

aber ein autoplay würde ich nicht empfehlen, es kann nur nerven wenn unerwünscht etwas einfach so startet.
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: bemerkenswelt am 19. Juni 2016, 11:16:57
Zitat von: MarcAurel am 19. Juni 2016, 09:13:00
... aber ein autoplay würde ich nicht empfehlen, es kann nur nerven wenn unerwünscht etwas einfach so startet.

Mag prinzipiell richtig sein, im Einzelfall kann aber auch ein Autostart sinnvoll sein.
Der nutzt mir aber als generelle Einstellung, in der plugin.css nichts, weil er auf der Seite individuell machbar sein muss. Als Parameter bei der Einbindung des jeweiligen Videos halt.

Aber ich kann dafür ja, wie bisher, den Umweg über das Hochladen zu YouTube oder Vimeo gehen. Macht sowieso Sinn für speicherintensive Videos nicht den eigenen Webspace zu verbrauchen. So wie ich es bisher mache – siehe hier > (http://bemerkenswelt.de/VIDEO-LINKS.html)

Schönen Sonntag noch allerseits.
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: MarcAurel am 19. Juni 2016, 14:17:08
Mit wenig Mühe sollte man auch das Einbinden von externen Resourcen möglich machen, Video-Dateien kann man auch auf einem Extra-Server halten:

http://mozilo.info/Extras/VideoTest.html (http://mozilo.info/Extras/VideoTest.html)

und ich würde an die Überprüfumng von mime-type verzichten und nur über "extension" entscheiden was und wie angezeigt werden soll.

Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: MarcAurel am 19. Juni 2016, 14:56:42
und noch etwas, man kann auch ein Bild als Startanzige zeigen:

<video controls preload="none" poster="myvideo.jpg">

wenn myvideo.mp4 - > file_exists( myvideo.jpg) or file_exists( myvideo.png)
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 01. Juli 2016, 15:59:42
Hi,

danke für euer Feedback. Komme aktuell mal wieder zu nix, steht aber aufm Zettel.
Bezüglich der Optionen: Ich wollte es so einfach wie möglich halten. Ich werd mir was überlegen, wie ichs dem Einsteiger so übersichtlich wie möglich, aber dem Profi voll konfigurierbar anbiete. Sollte zu machen sein ;)

Gruß
Arvid
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 11. August 2016, 17:49:03
Hallo,

danke für die Anregungen und Hinweise. Ich habe zwischenzeitlich das Einbinden externer Mediendateien sowie eine globale und Player-individuelle Konfiguration nachgerüstet (einzig das "poster"-Attribut fürs Previewbildchen ist noch nicht drin). Bevor ichs im Pluginarchiv aktualisiere, schaut bitte mal drauf und lasst mich wissen, ob alles sauber unter 1.12 und 2.0 funktioniert. Als Dokumentation soll euch dabei erst einmal nur die Plugin-Info im moziloAdmin herhalten - detaillierte Doku mit Beispielen reiche ich dann später auf meiner Website nach.

Danke und Gruß
Arvid
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 12. August 2016, 20:26:18
Bevor ich später wieder nicht dazu komme, hab ichs nun doch schon auf meiner Website dokumentiert (http://www.arvidzimmermann.de/index.php?cat=moziloCMS-Plugins&page=Audio-%20und%20Videoplayer) und im Pluginarchiv aktualisiert (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=288) ;)
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: mozzi am 23. August 2016, 18:28:11
Hallo Arvid,

ich habe jetzt mal das Plugin in einer Testinstallation geladen.
Versionsinfo:
2.0 ("Amalia")
Revision 36

Mit deaktiviertem Plugin sehe ich die ganz normale Webseite, mit aktiviertem Plugin funktioniert die MP4-Wiedergabe, aber oberhalb des Doctype-Headers steht im Quelltext:

<br />
<b>Strict Standards</b>:  Only variables should be passed by reference in <b>/var/www/######################################/plugins/audiovideo/index.php</b> on line <b>331</b><br />

Der Webspace, auf dem das CMS läuft, ist etwas älter, aber bislang hatte ich dort noch nie Probleme mit ungewöhlichen PHP-Einstellungen.

Soweit mal. Bin gespannt, ob das zu einem Update führt ;-)

Grüße
Mozzi
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 30. August 2016, 08:10:55
Weißt du, welche PHP-Version da läuft?
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: mozzi am 30. August 2016, 17:57:23
Mein Mozilo-Admin sagt mir:
5.4.45-0+deb7u4
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 04. September 2016, 14:23:44
Jup, habs gefunden, danke für die Meldung. Anbei die gefixte Version, bitte probier die mal aus.
Wenn alles passt, aktualisier ich das Paket im Pluginarchiv. Danke! :)
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: mozzi am 04. September 2016, 20:24:58
Wech isse - die Fehlermeldung.
Vielen Dank!

War die Behebung jetzt auch von allgemeinem Interesse, oder hing es noch mit der alten Mozilo-Revision zusammen?
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: azett am 05. September 2016, 19:22:40
So, ist im Pluginarchiv (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=288) aktualisiert - danke für die Meldung!
Das Problem bestand unabhängig von der verwendeten moziloCMS-Version oder -Revision - je nach Konfiguration der Server-Umgebung hat diese halt gemeckert oder nicht ;)
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: querolino am 08. Januar 2017, 19:13:09
Für ein neues Projekt http://53quer.de/test03/Woffelpantoffel/index.php?cat=Kindershow&page=Bewegungslieder (http://53quer.de/test03/Woffelpantoffel/index.php?cat=Kindershow&page=Bewegungslieder) möchte der Auftraggeber einige seiner Musiktitel auf der Internetseite abspielen lassen. Also habe ich den Audio-Videoplayer eingebaut. Auf Dektopgeräten wird das Lied auch angezeigt und kann abgespielt werden. unter iOS 10 wird die Datei jedoch nicht angezeigt. Was mache ich da falsch?
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: mozzi am 09. Januar 2017, 14:57:38
Ohne jetzt Ahnung von iOS 10 zu haben, würde ich mal vermuten, daß es am HTML5-Standard liegen müßte, der vielleicht von iOS 10 nicht vollständig unteretützt wird, im Quelltext oder im CSS fällt mir jedenfalls nichts Verdächtiges auf.
Oder - das Plugin trägt nicht alle teilweise erforderlichen Merkmale ins Audio- Tag ein - ???
Kopiere doch mal den erzeugten Quelltest dieses Bereichs in eine neue statische HTML-Datei, und füge einige weitere optionale Sachen wie "width=..." hinzu, und teste es im iOS 10. Oder entferne zum Abgleich stückweise Quelltext aus einer Kopie einer anderen Seite, wo der Player angezeigt wird.
Titel: Re: Mobilgerät-kompatibler Player für Audio- und Videodateien
Beitrag von: Paul am 30. Januar 2017, 23:57:14
Eigentlich unterstützt der Safari-Browser schon lange das HTML-Element <audio... siehe dazu
http://caniuse.com/#search=audio (http://caniuse.com/#search=audio)
Ich würde testweise mal eine ganz einfache Seite mit einem <audio-Element erstellen und auf dem gerät testen.