Frage HTML5 Audioplayer

[mundl]

Hallo hätte bitte eine Frage,
ist es möglich den HTML5 Audioplayer selbst ein wenig zu stylen wie z.B. den schwarzen Hintergrund?
Wenn Ja, Bitte wie?
Danke im voraus,
mundl

 

[basti1012]

kuck mal hier das sollte helfen
https://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081

und hier gibt es genug beispiele
https://codepen.io/search/pens?q=ht...=1&order=popularity&depth=title&show_forks=on

 

[mundl]

Danke basti1012,
dort war ich schon, ich möchte aber nur die schwarze Farbe am Player ändern.

 

[scbawik]

Danke basti1012,
dort war ich schon, ich möchte aber nur die schwarze Farbe am Player ändern.

video {
  background: #F00;
}

 

[mundl]

video {
  background: #F00;
}

Hallo scbawik, danke aber das funktioniert nicht!

 

[Sempervivum]

Das wird hier besprochen:

Is it possible to style html5 audio tag?

I haven't found any resources on how to do that. Something as simple as changing the color of the player would be nice to have :)

stackoverflow.com

Die Empfehlung lautet, eigene Controls zu verwenden, die den Player über die API steuern, so wie in dem Link von Basti ganz oben beschrieben.
Oder einen vorgefertigten Player, ich habe selber häufig Mediaelement verwendet und kann ihn empfehlen.

 

[Sempervivum]

Kann dann z. B. so aussehen:

 

[scbawik]

Hallo scbawik, danke aber das funktioniert nicht!

Zumindest in Safari und FF funktioniert das teilweise.
Sollte aber natürlich "audio" und nicht "video" lauten.

 

[mundl]

Ja so wie Sempervivum im 7. Beitrag das zeigt, wäre schön, aber irgendwie komme ich da nicht zurecht um dies zu bewerkstelligen. Nichts desto Trotz, ich gebe es auf, Danke noch allen für die Tip`s!
LG mundl

 

[Sempervivum]

Nicht aufgeben! Hier findest Du alles, um den Mediaelement-Player in deine Seite zu integrieren:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[mundl]

Hallo Sempervivum, herzlichen Dank für die Hilfestellung, SUPER!!!
Danke nochmals und LG, mundl

 

[mundl]

Hallo Sempervivum, eine Frage habe ich noch, ist es auch möglich mehrere dieser Player untereinander auf einer HTML Seite zu Integrieren, aber eben nicht mit einer Playlist?
Habe eben dies auch versucht, gelingt mir aber nicht!
LG, mundl

 

[Sempervivum]

Dank jQuery ist das sehr einfach, denn Du brauchst nur statt der ID eine Klasse zu verwenden, um die Audio-Tags anzusprechen:

    <audio class="player" src="audio/clip1.mp3" controls></audio>
    <audio class="player" src="audio/clip2.mp3" controls></audio>
    <audio class="player" src="audio/clip2.mp3" controls></audio>
    <script>
        $('.player').mediaelementplayer({
            pluginPath: 'https://cdnjs.com/libraries/mediaelement/',
            success: function (mediaElement, originalNode) {
                console.log('finished');
            }
        });
    </script>

Der Rest wie zuvor.

 

[mundl]

Hallo Sempervivum, Du bist Spitze, recht Herzlichen Dank nochmals für deine Hilfestellung, läuft alles SUPER!!!
Danke nochmals und Herzliche Grüße,
mundl