Frage HTML5 Audioplayer

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

mundl

Neues Mitglied
15 August 2017
14
0
1
69
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
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
Danke basti1012,
dort war ich schon, ich möchte aber nur die schwarze Farbe am Player ändern.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Das wird hier besprochen:
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.
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
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
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
Hallo Sempervivum, herzlichen Dank für die Hilfestellung, SUPER!!!
Danke nochmals und LG, mundl
 

mundl

Neues Mitglied
15 August 2017
14
0
1
69
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

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Dank jQuery ist das sehr einfach, denn Du brauchst nur statt der ID eine Klasse zu verwenden, um die Audio-Tags anzusprechen:
Code:
    <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

Neues Mitglied
15 August 2017
14
0
1
69
Hallo Sempervivum, Du bist Spitze, recht Herzlichen Dank nochmals für deine Hilfestellung, läuft alles SUPER!!!
Danke nochmals und Herzliche Grüße,
mundl
 
Werbung: