Blog

tags: news software php deutsch opensource webdesign


12.Oct.2015 00:13 - last update: 01.Sep.2016 13:44

HTML5 MediaPlayer "cbPlayer" veröffentlicht

cbPlayer audio mode
cbPlayer im audio Modus

Übersicht

In den letzten Tagen habe ich es endlich wahr gemacht - ich habe einen HTML5 basierten Medienspieler gebastelt. Grund: Nicht etwa, weil es noch nicht genug davon gibt, sondern weil ich wissen wollte, ob ich das hinkriege. Außerdem war es mir wichtig meine Seite frei von youtube und soundcloud tracking cookies bzw auch flash & Consorten zu halten. Also Neugier und Datenschutz.

Technisches

Es wird php benutzt, um ein Verzeichnis nach Mediendateien zu scannen und anschließend daraus eine Playlist zu generieren. Dabei kommt auch die freie Routine getID3() zum Einsatz. Danach wird per JavaScript der Player generiert, die Metadaten geladen und schlußendlich die Mediendaten. Audio und Video läßt sich abspielen.

Mit Hilfe von getID3() lassen sich jede Menge Daten aus Mediendateien auslesen. Was mal vor einiger Zeit dazu da war ein paar Tags aus mp3s auszulesen, hat sich zu einem handfesten Programm entwickelt, was jede Menge Formate versteht. GetID3() ist in php geschrieben und eignet sich somit hervorragend für meine Zwecke.

Damit kann ich schonmal jede Menge Info's in die audio bzw video-Tags hineinbringen, die sich dann später prima mit JavaScript wieder auslesen lassen.

In der Praxis sieht das dann in etwa so aus:


<<?php echo $mediatag; ?> class="cbPlayer_mediacontent" id="cbPlayer_<?php echo $files[$key]["id"]; ?>"
        mediagroup="cbplayer"
        preload="metadata"
        onended="currentMediaId++; playMedia(currentMediaId);"
        onprogress="showMedia(<?php echo $files[$key]["id"]; ?>);"
        oncanplay="activateMedia(<?php echo $files[$key]["id"]; ?>);"
        oncanplaythrough="finishMedia(<?php echo $files[$key]["id"]; ?>);"
        data-artist="<?php echo $files[$key]["artist"]; ?>"
        data-title="<?php echo $files[$key]["title"]; ?>"
        data-album="<?php echo $files[$key]["album"]; ?>"
        data-year="<?php echo $files[$key]["year"]; ?>"
        data-filename="<?php echo rawurlencode($files[$key]["filename"]); ?>"
        data-mediatype="<?php echo $files[$key]["mediatype"]; ?>"
<?php foreach ($files[$key]["type"] as $extkey => $ext) { ?>
        data-filesize-<?php echo $files[$key]["type"][$extkey]["ext"]; ?>="<?php echo $files[$key]["type"][$extkey]["filesize"]; ?>"<?php } ?>>
<?php
   foreach ($files[$key]["type"] as $extkey => $ext)
     { ?>
       <source src="<?php echo "$cbPlayer_dirname/" . rawurlencode($files[$key]["filename"]) . ".{$files[$key]["type"][$extkey]["ext"]}"; ?>" type="<?php echo $files[$key]["type"][$extkey]["mime"]; ?>">
<?php
     } ?>
     </<?php echo $files[$key]["mediatype"]; ?>>

Raus kommt dann im HTML sowas hier, z.Bsp.:


<audio class="cbPlayer_mediacontent" id="cbPlayer_14"
        mediagroup="cbplayer"
        preload="metadata"
        onended="currentMediaId++; playMedia(currentMediaId);"
        onprogress="showMedia(14);"
        oncanplay="activateMedia(14);"
        oncanplaythrough="finishMedia(14);"
        data-artist="Hübi, Ralfi & Chris"
        data-title="The thrill is gone"
        data-album="Summertime Sessions"
        data-year="2005"
        data-filename="15_-_Huebi_Ralfi_Chris_-_The_thrill_is_gone"
        data-mediatype="audio"
        data-filesize-mp3="9330688"        data-filesize-ogg="11673719">
       <source src="content/media/15_-_Huebi_Ralfi_Chris_-_The_thrill_is_gone.mp3" type="audio/mpeg">
       <source src="content/media/15_-_Huebi_Ralfi_Chris_-_The_thrill_is_gone.ogg" type="audio/ogg">
     </audio>

Man beachte hierbei, daß ich da schon alle für mich interessanten Daten aus dem vom getID3 erzeugten Array in ein eigenes übertragen habe, die Variablen heißen bei getID3 ein wenig anders. Da gibts auch ein paar kleine Tücken, Z.Bsp. heißt bei einem mp3-file der "Artist"-Tag. $ThisFileInfo["tags"]["id3v1"]["artist"][0], während derselbe Inhalt für ein ogg so hier aussieht: $ThisFileInfo["tags"]["vorbiscomment"]["artist"][0]. Das ist etwas verwirrend und auch umständlich, da man ja besonders bei Web-Anwendungen immer mp3 und ogg bereitstellen sollte. Ganz ähnlich ist das bei Videos.

cbPlayer video mode
cbPlayer im video Modus

JavaScript

Ich hab schon immer gewußt, warum ich mich vor JavaScript gedrückt hab - es ist einfach nur anstrengend (IMHO). Sowas redundantes hab ich noch nicht erlebt. Egal, es ist ja allerhand zustande gekommen. :o)

Z.Bsp. hab ich mich am meisten damit rumgeärgert, daß JS ein ziemlich fragiles Tierchen ist. Im Firefox bleibt sofort alles stehen, wenn man mal irgendwo ein "undefined" nicht sauber abfängt. Chromium war da etwas robuster.

Ich wunder mich auch ein bißchen wofür man für ein bißchen mp3 Abspielen überhaupt solch eine Sprache braucht. Ok, man könnte JS weglassen, dann hat man aber für jedes Medien-Element eine eigene Bedienung, was nicht nur der allgemeinen Übersicht schadet. Also: JS muß her!

Buffering

Das schwerwiegendste Problem ist das Buffern der Metadaten. Ohne diese sind schlichtweg keine JS-Objekte vorhanden und alles bleibt stehen (Object is undefined). Man muß also den preload mindestens auf "metadata" stellen, sonst läuft jeder Versuch die Datei abzuspielen ins Nirvana. Bei preload="auto" stellt sich das Problem bei mehreren Dateien, daß es einfach ewig dauert bis alles runtergeladen wurde. Somit ist preload="metadata" der bessere Kompromiß, mit dem man dann in unerheblich kürzerer Zeit wenigstens schonmal was da hat, was man auch starten kann. Bislang hab ich noch keine Möglichkeit gefunden, das Verhalten des Browsers zu beeinflussen, was wann runtergeladen wird. Firefox stellt sich da ziemlich dämlich an, wenn ich das mal so sagen darf. Da wird alles in einer wirren Reihenfolge geladen, was scheinbar möglichst lange dauert, damit der Nutzer möglichst lange wartet. Chromium war da wesentlich schneller. Der kann allerdings auch die mp3s lesen, im Gegensatz zu Firefox. Das scheint generell schneller zu gehen. Dafür stimmen oft die Metadaten nicht so genau. Da wird z.Bsp. eine Spiellänge von 3:19 angegeben, und die mp3 läuft dann bis 4:25. Ziemlich nervig. Das liegt wohl am VBR, hab ich irgendwo gelesen.

Weitere Eckdaten:

Ich veröffentliche das Ganze unter der GNU GPL v3, so wie auch getID3() unter der GPL3 steht.

Download Quellen: https://github.com/chris-blues/cbPlayer

In freier Wildbahn: https://musicchris.de/index.php?page=media


Update 2015-10-19

Inzwischen liegt Version v0.03 zum Download bereit.

Changelog:

v0.04: (2015-10-26)

  • Changed media's events to fire more quickly during the process of getting all the necessary data to play the files -> playlist items get clickable earlier
  • Added small field with prog's name in the leftside box, below the control buttons
  • Removed fixed background color on main div, let's adapt to the web-site
  • Added slight visual effect on the control buttons images

v0.03: (2015-10-18)

  • Added a prettier filename for download
  • Corrected some mime-type issues
  • added audio/video icons in the playlist

v0.02: (2015-10-13)

  • Added a download section for the current file in the infobox


Über Anregungen, Ideen und Verbesserungsvorschläge würde ich mich sehr freuen. Benutzt gerne die Kommentarfunktion hier unten dafür. :o)

Die Entwicklung ist noch nicht vorbei, es ist nur ein erster brauchbarer Zustand. Insofern wird es immer wieder mal Updates geben.

Außerdem würde ich mich sehr über Kommentare freuen, bezüglich der Kompatibilität mit den verschiedenen Browsern. Firefox verschluckt sich manchmal an den vielen Daten, die bei meiner Installation vorhanden sind. Außerdem erwische ich Firefox immer wieder, wie er versucht alle Daten auf einmal herunterzuladen! Chromium und Opera verhalten sich vorbildlich und laden auch nur benötigte Daten herunter. IE und Safari kann ich mangels OS nicht testen... (Gibts Konqueror eigentlich überhaupt noch?)




comments

post a comment








😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙁🙂🙃🙄🙅🙆🙇🙈🙉🙊🙋🙌🙍🙎🤐🤑🤒🤓🤔🤕🤖🤗🤘🤠🤡🤢🤣🤤🤥🤦🤧👍𝄞🌍🌹🍻🍾

privacy declaration

Your IP-address, useragent-string etc are not stored by this blog-software. Still, it is possible that the hoster of this website may store data like this. But that is beyond the scope of this blog-software. Check out this website's privacy declaration to find out more about that!

This blog-software generally doesn't store any information about you. Only if you post a comment, some data will have to be stored. You don't have to input any personal information here. Except for the comment itself, all fields are optional!
If you don't want to tells us your name, that's fine. It will be shown as 'anonymous'.
If you want to receive notifications on following comments, naturally you'll have to give us your email address. It will be stored and not be shared with anybody. If you don't want to be notified, just leave the notifications field empty.
If you want your name to be linked to your website, you'll have to give us your site's address. Otherwise leave this field empty.

This data will be stored in case you decide to post a comment here:

  • time and date of your post
  • your name (if supplied)
  • your email (if supplied)
  • your website (if supplied)
  • your comment
  • some technical information unrelated to you, like which blogpost this comment belongs to and a unique id for this comment