Ich benutze Github, um HTML-Code für eine Website zu hosten, die ich am Aufbau arbeite, und ich würde gerne einen Audio-Player an den unteren Rand des Fensters mit Scrolling hinzufügen. Ich habe es an einem Punkt gemacht, aber das USB-Flash-Laufwerk, auf dem es war beschädigt, und ich habe die Datei für immer verloren. Wer weiß einen einfachen Weg, dies zu tun? Ich habe es gemacht, ohne ein div zu verwenden und ich möchte es so behalten.Wie mache ich ein einfaches <audio> Element beim Scrollen am unteren Rand des Browser-Fensters?
Antwort
Was ist ein wenig css zwicken auf der Audio-style-Attribut
bottom: 0;
position: fixed;
right: 0;
Ich bin mir ziemlich sicher, dass es schon so eingestellt ist ... Wie auch immer Sie sich frei fühlen können Nehmen Sie Änderungen an der Git-Kopie vor. Ich habe es für die richtige Einstellung auf auto eingestellt, damit es versuchen kann, es zu zentrieren. –
Ich habe es überprüft. Sie haben Musikklasse verwendet, um die CSS zu definieren, aber auf dem Audio-Tag, anstatt Audio-Tag-Klasse zu Musik geben, haben Sie es Stil Musik gegeben. Überprüfen Sie bitte das. Verwenden Sie auch rechts: 0 in der CSS anstelle von Auto, wenn Sie es unten rechts auf Ihrer Seite wollen –
Ich möchte es in der unteren Mitte der Seite. Klasse scheint ein bisschen besser. –
Verwenden CSS Styling
HTML und CSS
<html>
<style>
#fixed{
position:fixed;
bottom:0px;
right:0px;
}
</style>
<body>
<audio id = "fixed" controls>
<source src = "audio.mp3" type = "audio/mpeg">
</audio>
</body>
</html>
Überprüfen Sie die Schnipsel aus ... Diese Hoffnung ist, was Sie wollen!
#fixed{
position:fixed;
bottom:0px;
right:0px;
}
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>End of Page
<audio id = "fixed" controls>
<source src = "audio.mp3" type = "audio/mpeg">
</audio>
</body>
</html>
Vielen Dank im Voraus
Ich würde es gerne alle in der einen .html-Datei wenn möglich zu halten. –
Ich habe die Antwort aktualisiert, aber ich werde nicht wie repariert aussehen, bis einige Daten auf der Seite sind. Wie im Snippet gab es Leerzeichen von
Tags. Kommentar wenn noch irgendwelche Probleme –
Eigentlich funktioniert es jetzt. Ich hatte Stil = Musik, wenn es Klasse = Musik hätte sein sollen. –
- 1. Wie man eine Fußzeile am unteren Rand der Seite, nicht am unteren Rand des Ansichtsfensters fixiert
- 2. Put appbarLayout am unteren Rand des Bildschirms
- 3. Ausblenden Dreieck am unteren Rand des Bildes
- 4. Ruby-Methoden am unteren Rand des Skripts?
- 5. Listview - Fußzeile am unteren Rand des Bildschirms
- 6. Wie zeichne ich Zeilen am unteren Rand des DataGridView?
- 7. Scrollbildlauf nicht an den Rand am unteren
- 8. eine CSS Fußzeile zu machen entweder am unteren Rand des Browserfensters oder unten Inhalt sitzen
- 9. Auto Verstecken Navigation am unteren Rand des Browser-Fensters
- 10. ArcMenu mainImage Ich brauche am unteren Rand des Bildschirms. OnMeasure lässt es nicht am unteren Rand des Bildschirms
- 11. ReportViewer doppelte Symbolleiste am unteren Rand des Berichts?
- 12. jquery - Erkennen, ob der untere Teil des div den unteren Rand des Browserfensters berührt?
- 13. Fußzeile am unteren Rand behalten
- 14. die Scrollview Scrollen am unteren programmatisch - iphone
- 15. Symbolleiste am unteren Rand in CoordinatorLayout
- 16. One Page Checkout scrollen zum unteren Rand des Bildschirms am nächsten
- 17. UIButton am unteren Rand des Bildschirms nur gelegentlich Highlights
- 18. Appcelerator Titanium - Wie platziere ich ein Bild am unteren Rand des Bildschirms
- 19. horizontale Legende am unteren Rand des Graphen in jqplot
- 20. Müssen div mit iFrame am unteren Rand des Browsers halten
- 21. Onsen Artikel Liste am unteren Rand des Bildschirms
- 22. Ausrichten div am unteren Rand des Fensters Innenhöhe
- 23. Wie man ein Div beim Scrollen festlegt
- 24. Wie entferne ich die Bearbeitungszeile am unteren Rand eines DataGridView?
- 25. Erscheint am unteren Rand einer leeren UINavigationBar
- 26. Text kommt nicht am unteren Rand des Bildschirms
- 27. Tastatur die Suche am unteren Rand des Layout
- 28. Ungerade weiße Fläche am unteren Rand des Android-Fragments?
- 29. Leerstelle am unteren Rand der Seite leeren?
- 30. Rand für unteren Rand
position: fixed; unten: 0 –
Können Sie Ihren Code teilen, was Sie erstellt haben? –
Der aktuellste Code ist derzeit im Github Repo gespeichert. Die Datei es Test.html bei https://github.com/The-Unnamed-Engineer/Website-coding/tree/gh-pages –