html5 player

DanielR · 1 März 2014

hallo- ich hoffe da können mir welche weiter helfen!

Also zu meiner Geschichte: ich hatte mich früher sehr viel mit html und der gleichen beschäftigt und 10 Jahre später keinen Plan mehr wie was wann. Einiges ist mir geblieben, aber auch vieles, was mir Heute auch nichts mehr bringt,darum habe ich mich für den Magix Web Designer 9 Premium entschieden , weil ich dringend für mein Label eine Homepage benötige, Bislang ist alles so wie ich es möchte bis auf den Html5 Player den ich mir mit viel Infos gebastelt habe.

Im Grunde geht es mir nur darum die Lieder auf meine Homepage nur Spielen zu können ohne es durch Rechte Maustaste gleich speichern zu können.

Also jetzt zu meinem Problem:
wie erwähnt hatte ich mir mit viel Aufwand den html5 Player gemacht. Der eigentlich SUPER FUNKTIONIERT.
jetzt ist es so das GENAU nur einer dieser "widgets" (web designer 9 "Platzhalter") funktioniert, Was schön und gut ist, kaum mache ich 3 oder mehr geht garnix mehr!!

Woran kann das Liegen? Vielleicht hat wer einen Tipp oder auch einen HTML code mit nur (Play/Pause) buttons

Hier der Code:

<html>
<head>
<title>HTML5 Audio</title>
<script type="text/javascript">
function abspielen()
{
document.getElementById("player").play();
document.getElementById("pausebutton").style.display = "";
document.getElementById("playbutton").style.display = "none";
}
function pausieren()
{
document.getElementById("player").pause();
document.getElementById("playbutton").style.display = "";
document.getElementById("pausebutton").style.display = "none";
}

</script>
</head>
<body>
<audio id="player">
<source src="Demo.mp3" type="audio/mpeq"></source>
<source src="Demo.ogg" type="audio/ogg"></source>
</audio>
<img src="play.png" onclick="abspielen()" id="playbutton" />
<img src="pause.png" onclick="pausieren()" id="pausebutton" style="display: none" />
</body>
</html>

Danke im voraus mfg

Sunnyboy · 30 März 2014

Ist sicher keine sehr tolle Lösung, aber sie funktioniert:

HTML:

<html>
<head>
    <title>HTML5 Audio</title>
    <script type="text/javascript">
        function abspielen(){
            document.getElementById("player").play();
            document.getElementById("pausebutton").style.display = "";
            document.getElementById("playbutton").style.display = "none";
        }
        function pausieren(){
            document.getElementById("player").pause();
            document.getElementById("playbutton").style.display = "";
            document.getElementById("pausebutton").style.display = "none";
        }
        function abspielen1(){
            document.getElementById("player1").play();
            document.getElementById("pausebutton1").style.display = "";
            document.getElementById("playbutton1").style.display = "none";
        }
        function pausieren1(){
            document.getElementById("player1").pause();
            document.getElementById("playbutton1").style.display = "";
            document.getElementById("pausebutton1").style.display = "none";
        }
    </script>
</head>
<body>
    <audio id="player">
        <source src="Demo.mp3" type="audio/mpeq"></source>
        <source src="Demo.ogg" type="audio/ogg"></source>
    </audio>
    <img src="play.png" onclick="abspielen()" id="playbutton" />
    <img src="pause.png" onclick="pausieren()" id="pausebutton" style="display: none" />
   
    <audio id="player1">
        <source src="Demo.mp3" type="audio/mpeq"></source>
        <source src="Demo.ogg" type="audio/ogg"></source>
    </audio>
    <img src="play.png" onclick="abspielen1()" id="playbutton1" />
    <img src="pause.png" onclick="pausieren1()" id="pausebutton1" style="display: none" />
</body>
</html>

Sempervivum · 30 März 2014

Etwas eleganter wäre es, wenn Du die Funktionen nur einmal hättest und die IDs mit Parametern übergeben würdest:

Code:

        function abspielen(idplayer, idpause, idplay){
            document.getElementById(idplayer).play();
            document.getElementById(idpause).style.display = "";
            document.getElementById(idplay).style.display = "none";
        }

Code:

    <audio id="player">
        <source src="Demo.mp3" type="audio/mpeq"></source>
        <source src="Demo.ogg" type="audio/ogg"></source>
    </audio>
    <img src="play.png" onclick='abspielen("player", "pausebutton", "playbutton")' id="playbutton" />
    <img src="pause.png" onclick='pausieren("player", "pausebutton", "playbutton")' id="pausebutton" style="display: none" />

und analog mit dem zweiten Player. Vor allem, wenn Du mehr als zwei Player hast, macht das die Sache übersichtlicher.
Noch eleganter und einfacher zu verwalten wäre es wahrscheinlich, wenn Du einen Player mit Playlist verwenden würdest.

html5 player

DanielR

Guest

Sunnyboy

Mitglied

Sempervivum

Guest

Neueste Beiträge