Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Mobilgerät-kompatibler Player für Audio- und Videodateien

Begonnen von azett, 11. Juni 2016, 22:53:17

« vorheriges - nächstes »

azett

Hallo zusammen,

für die Einbindung von Audio- oder Videodateien in moziloCMS stehen mit dem MP3-Player und dem FlayrPlayer 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.

Das Plugin unterstützt folgende Dateiformate:

  • mp3 (audio/mpeg)
  • ogg (audio/ogg)
  • wav (audio/wav)
  • mp4 (video/mp4)
  • webm (video/webm)
  • ogg (video/ogg)
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

Dokumentation:
Auf arvidzimmermann.de

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

azett

MarcAurel kommentierte im Pluginarchiv:
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

bemerkenswelt

#2
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 >

azett

#3
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

bemerkenswelt

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}

bemerkenswelt

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.

MarcAurel

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.

bemerkenswelt

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 >

Schönen Sonntag noch allerseits.

MarcAurel

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

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


MarcAurel

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)

azett

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

azett

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

azett


mozzi

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
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

azett