Hast du die ID an allen Stellen geändert? Also auch im Javascript?
MP3 / Audio Player mit Geschwindigkeitsregelung
- vitalis
- Erledigt
-
-
Hast du die ID an allen Stellen geändert? Also auch im Javascript?
Ja
-
In deinem Quelltext (HTML-Code) stehen beide Videos nach wie vor unter einer Video-ID:
Nimm doch auch mal zwei verschiedene Videos und nicht eins gedoppelt. Man kann schließlich nie wissen
Nur so am Rande: Wir arbeiten hier mit HTML5 - das hat weder was mit JavaScript zu tun und schon mal gar nicht mit Java Beides sind sehr unterschiedliche Programmiersprachen. Bitte niemals verwechseln!
Axel
-
In deinem Quelltext (HTML-Code) stehen beide Videos nach wie vor unter einer Video-ID:
Nimm doch auch mal zwei verschiedene Videos und nicht eins gedoppelt. Man kann schließlich nie wissen
Nur so am Rande: Wir arbeiten hier mit HTML5 - das hat weder was mit JavaScript zu tun und schon mal gar nicht mit Java Beides sind sehr unterschiedliche Programmiersprachen. Bitte niemals verwechseln!
Axel
also mein Test Beitrag besteht jetzt aus 2 Eigene Module,
{module Eigenes Modul 1} - mit Video
{module Eigenes Modul 4 audio} - Mit Mp3 Audio
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <script> window.onload = function () { var v = document.getElementById("myVideo1"); var p = document.getElementById("pbr1"); var c = document.getElementById("currentPbr1"); p.addEventListener('input',function(){ c.innerHTML = p.value; v.playbackRate = p.value; },false); }; </script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr { width:100%; } </style> </head> <body> <div class="holder"> <video id="myVideo1" controls> <source src="http://hyperaud.io/video/obama-responds.mp4" type='video/mp4' /> </video> <form> <input id="pbr1" type="range" value="1" min="0.5" max="4" step="0.1" > <p>Playback Rate <span id="currentPbr1">1</span></p> </form> </div> </body> </html>
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <script> window.onload = function () { var v = document.getElementById("myVideo4"); var p = document.getElementById("pbr4"); var c = document.getElementById("currentPbr4"); p.addEventListener('input',function(){ c.innerHTML = p.value; v.playbackRate = p.value; },false); }; </script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr { width:100%; } </style> </head> <body> <div class="holder"> <video id="myVideo4" controls> <source src="http://www.iptv.es.ht/images/music/FroheWeihnacht.mp3" type='audio/mp3' /> </video> <form> <input id="pbr4" type="range" value="1" min="0.5" max="4" step="0.1" > <p>Playback Rate <span id="currentPbr4">1</span></p> </form> </div> </body> </html>
Link dazu .
Was mach ich falsch
-
Ich habe mir gerade einen JavaScript Schnipsel angesehen.
Code
Alles anzeigen<script> window.onload = function () { var v = document.getElementById("myVideo1"); var p = document.getElementById("pbr1"); var c = document.getElementById("currentPbr1"); p.addEventListener('input',function(){ c.innerHTML = p.value; v.playbackRate = p.value; },false); }; </script>
Die Variablen v, p und c verwendest du mehrmals auf der Seite. Nenne diese auch v1, p1, c1 beziehungsweise v4, p4, c4.
Außerdem würde ich die Zeilen
nicht in das Custom-Modul einfügen.
-
Lieder immer noch fehlerhaft
Dieses mal am Stück, ohne zwei Module hinzufügen.
Code
Alles anzeigen<script> window.onload = function () { var v1 = document.getElementById("myVideo1"); var p1 = document.getElementById("pb1r"); var c1 = document.getElementById("currentPbr1"); p1.addEventListener('input',function(){ c1.innerHTML = p1.value; v1.playbackRate = p1.value; },false); }; </script> <style> height:360; margin: 0 auto; margin-bottom:14em; } #pbr1 { width:100%; } </style> <div class="holder"> <video id="myVideo1" controls> <source src="http://hyperaud.io/video/obama-responds.mp4" type='video/mp4' /> <source src="http://hyperaud.io/video/obama-responds.webm" type='video/webm' /> </video> <form> <input id="pb1r" type="range" value="1" min="0.5" max="4" step="0.1" > <p>Playback Rate <span id="currentPbr1">1</span></p> </form> </div> <script> window.onload = function () { var v4 = document.getElementById("myVideo4"); var p4 = document.getElementById("pbr4"); var c4 = document.getElementById("currentPbr4"); p4.addEventListener('input',function(){ c4.innerHTML = p4.value; v4.playbackRate = p4.value; },false); }; </script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr4 { width:100%; } </style> <div class="holder"> <video id="myVideo4" controls> <source src="http://www.iptv.es.ht/images/music/FroheWeihnacht.mp3" type='audio/mp3' /> <source src="http://www.iptv.es.ht/images/music/FroheWeihnacht.mp3" type='video/webm' /> </video> <form> <input id="pbr4" type="range" value="1" min="0.5" max="4" step="0.1" > <p>Playback Rate <span id="currentPbr4">1</span></p> </form> </div>
-
Du hast die eine ID im HTML pb1r genannt und im CSS pbr1.
-
Du hast die eine ID im HTML pb1r genannt und im CSS pbr1.
Hab verbessert, leider immer noch beim 2 Video bzw. Audio alles ok mit Regler , bei dem erstem Video tut sich nichts ...
-
Versuch es mal so...
Code
Alles anzeigen<script type="text/javascript">window.onload = function () { var v = document.getElementById("myVideo"); var p = document.getElementById("pbr"); var c = document.getElementById("currentPbr"); p.addEventListener('input',function(){ c.innerHTML = p.value; v.playbackRate = p.value; },false); var v1 = document.getElementById("myVideo1"); var p1 = document.getElementById("pbr1"); var c1 = document.getElementById("currentPbr1"); p1.addEventListener('input',function(){ c1.innerHTML = p1.value; v1.playbackRate = p1.value; },false); };</script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr, #pbr2 { width:100%; } </style> <div class="holder"> <video controls="controls" id="myVideo"><source src="http://hyperaud.io/video/obama-responds.mp4" type="video/mp4" /> <source src="http://hyperaud.io/video/obama-responds.webm" type="video/webm" /> </video> <form><input max="4" min="0.5" step="0.1" type="range" value="1" id="pbr" /> <p>Playback Rate <span id="currentPbr">1</span></p> </form> </div> <div class="holder"> <video controls="controls" id="myVideo1"><source src="http://hyperaud.io/video/obama-responds.mp4" type="video/mp4" /> <source src="http://hyperaud.io/video/obama-responds.webm" type="video/webm" /> </video> <form><input max="4" min="0.5" step="0.1" type="range" value="1" id="pbr1" /> <p>Playback Rate <span id="currentPbr1">1</span></p> </form> </div>
So funktioniert es bei mir zumindest.
-
Versuch es mal so...
Code
Alles anzeigen<script type="text/javascript">window.onload = function () { var v = document.getElementById("myVideo"); var p = document.getElementById("pbr"); var c = document.getElementById("currentPbr"); p.addEventListener('input',function(){ c.innerHTML = p.value; v.playbackRate = p.value; },false); var v1 = document.getElementById("myVideo1"); var p1 = document.getElementById("pbr1"); var c1 = document.getElementById("currentPbr1"); p1.addEventListener('input',function(){ c1.innerHTML = p1.value; v1.playbackRate = p1.value; },false); };</script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr, #pbr2 { width:100%; } </style> <div class="holder"> <video controls="controls" id="myVideo"><source src="http://hyperaud.io/video/obama-responds.mp4" type="video/mp4" /> <source src="http://hyperaud.io/video/obama-responds.webm" type="video/webm" /> </video> <form><input max="4" min="0.5" step="0.1" type="range" value="1" id="pbr" /> <p>Playback Rate <span id="currentPbr">1</span></p> </form> </div> <div class="holder"> <video controls="controls" id="myVideo1"><source src="http://hyperaud.io/video/obama-responds.mp4" type="video/mp4" /> <source src="http://hyperaud.io/video/obama-responds.webm" type="video/webm" /> </video> <form><input max="4" min="0.5" step="0.1" type="range" value="1" id="pbr1" /> <p>Playback Rate <span id="currentPbr1">1</span></p> </form> </div>
So funktioniert es bei mir zumindest.
cool , funktioniert ! Danke .
Hab Poster hinzugefügt , und Video auf Audio geändert. ( Link )
Auf was soll ich beachten , ich muss ja mindestens 5 aber am besten 22 Chor Lieder zum üben in Einem Beitrag hinzufügen.
Als Module z.B. {module Eigenes Modul 1} , {module Eigenes Modul 2} mit verschiedenen Lieder kann ich wahscheinlich nicht arbeiten , oder ?
Danke nochmals !
-
Auf was soll ich beachten , ich muss ja mindestens 5 aber am besten 22 Chor Lieder zum üben in Einem Beitrag hinzufügen.
Als Module z.B. {module Eigenes Modul 1} , {module Eigenes Modul 2} mit verschiedenen Lieder kann ich wahscheinlich nicht arbeiten , oder?
Mit Modulen wird es nicht funktionieren. Du darfst die window.onload Funktion nur einmal aufrufen und in ihr müssen alle Variablen deklariert sein.
Die verschiedenen Lieder ( also den HTML-Code) kannst du in verschiedene Module packen.
Also dann so ähnlich:
Code
Alles anzeigen<script type="text/javascript">window.onload = function () { var v = document.getElementById("myVideo"); var p = document.getElementById("pbr"); var c = document.getElementById("currentPbr"); p.addEventListener('input',function(){ c.innerHTML = p.value; v.playbackRate = p.value; },false); var v1 = document.getElementById("myVideo1"); var p1 = document.getElementById("pbr1"); var c1 = document.getElementById("currentPbr1"); p1.addEventListener('input',function(){ c1.innerHTML = p1.value; v1.playbackRate = p1.value; },false); }; </script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr, #pbr2 { width:100%; } </style> {module Eigenes Modul 1} {module Eigenes Modul 2}
Und im Modul steht dann jeweils nur:
Code<div class="holder"> <video controls="controls" id="myVideo"><source src="http://hyperaud.io/video/obama-responds.mp4" type="video/mp4" /> <source src="http://hyperaud.io/video/obama-responds.webm" type="video/webm" /> </video> <form><input max="4" min="0.5" step="0.1" type="range" value="1" id="pbr" /> <p>Playback Rate <span id="currentPbr">1</span></p> </form> </div>
Es müssen dann eben nur die IDs angepasst werden für jedes Modul.
-
Einfach SUPER !
Danke
Genau so habe ich mir vorgestellt
Habe noch Video auf Audio Player angepasst, und mit htmleditor Lied Text rechtsbündig angepasst.
Was sind eigentlich #pbr, #pbr2 {, Zeile 49 ,die müssen aber nicht geändert werden ?
Code
Alles anzeigen<script type="text/javascript">window.onload = function () { var v5 = document.getElementById("myVideo5"); var p5 = document.getElementById("pbr5"); var c5 = document.getElementById("currentPbr5"); p5.addEventListener('input',function(){ c5.innerHTML = p5.value; v5.playbackRate = p5.value; },false); var v6 = document.getElementById("myVideo6"); var p6 = document.getElementById("pbr6"); var c6 = document.getElementById("currentPbr6"); p6.addEventListener('input',function(){ c6.innerHTML = p6.value; v6.playbackRate = p6.value; },false); var v7 = document.getElementById("myVideo7"); var p7 = document.getElementById("pbr7"); var c7 = document.getElementById("currentPbr7"); p7.addEventListener('input',function(){ c7.innerHTML = p7.value; v7.playbackRate = p7.value; },false); var v8 = document.getElementById("myVideo8"); var p8 = document.getElementById("pbr8"); var c8 = document.getElementById("currentPbr8"); p8.addEventListener('input',function(){ c8.innerHTML = p8.value; v8.playbackRate = p8.value; },false); }; </script> <style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr, #pbr2 { width:100%; } </style> {module Eigenes Modul 5 04.v11.s_c_igdeb_2011.mp3} {module Eigenes Modul 6 07.v13.s_c_igdeb_2011.mp3} {module Eigenes Modul 7 09.v4.s_c_igdeb_2011.mp3} {module Eigenes Modul 8 12.v7.s_c_igdeb_2011.mp3}
Code<div class="holder"><audio controls="controls" id="myVideo5"><source src="http://iptv.es.ht/images/music/04.v11.s_c_igdeb_2011.mp3" type="audio/mpeg" /> <source src="http://iptv.es.ht/images/music/04.v11.s_c_igdeb_2011.mp3" type="audio/mpeg" /> </audio> 4. And the Glory of the Lord - Seite 12<form><input max="4" min="0.5" step="0.1" type="range" value="1" id="pbr5" /> <p>Tempo <span id="currentPbr5">1</span></p> </form></div> <div class="holder"><form> <p><span id="currentPbr5"></span></p> </form></div>
-
Was sind eigentlich #pbr, #pbr2 {, Zeile 49 ,die müssen aber nicht geändert werden ?
Das sind die CSS-Anweisungen für den Regler. Müsstest dann nur alle IDs der Regler mit dazu schreiben. Damit alle Regler die gleiche Weite haben.
-
Ok. Mache ich .
Gibst du mir bitte noch Tip wie ich die Audio Player’s nicht so weit auseinander bekomme ?
Und So wie ich festgestellt habe , darf nur 1 Beitrag pro Domain / Joomla Seite mit diesem Script sein, so bald ich den zweiten Beitrag freischalte ( auch mit total anderen mp3‘s ) funktionieren Regler nicht mehr ... vieleicht hast du mir auch Tip dazu .
-
Hallo,
hoffe, die 1. Frage richtig verstanden zu haben. Im Seitenquelltext sieht man:
Code
Alles anzeigen<style> .holder { width:640px; height:360; margin: 0 auto; margin-bottom:14em; } #pbr5, #pbr6, #pbr7, #pbr8, { width:100%; } </style>
ein margin-bottom:14em;
Entweder dort ändern oder in der CSS:
Liebe Grüße
Christine
-
Code
.holder {
margin-bottom:3em !important;
}Hallo Christine.
Danke.Sieht sehr gut aus .
Jetzt nur noch Lösung finden wie man gleichen Script in verschiedenen Beiträgen hinzufügen kann , und dann als erledigt markieren.
Und So wie ich festgestellt habe , darf nur 1 Beitrag pro Domain / Joomla Seite mit diesem Script sein, so bald ich den zweiten Beitrag freischalte ( auch mit total anderen mp3‘s ) funktionieren Regler nicht mehr ... vieleicht hast du mir auch Tip dazu .
Ich sag jetzt schon an alle VIELEN DANK !!!
LG
Vitalis
-
Hallo an alle, danke für euren Input! Ich war gerade auf der Suche nach genau den gleichen Anforderungen: audio-file mit Temporegler.
Als Plugin hab ich den genommen: https://www.marcobeierer.com/joomla-extensions/html5-audio und etwas umgearbeitet.
Um mehrere Audio-files auf eine Seite mit gleicher id zu integrieren, hab ich iframes eingesetzt (vielleicht nicht die feine Art, funktioniert aber). Den Editor TinyMCE kann man übrigens im Plugin so einstellen, dass er auch tags wie iframe akzeptiert ("Use Joomla Text Filter" auf AN).
Das i-Tüpfelchen wäre ein script, der einen Player verstummen lassen würde, wenn man den aktiviert. Theoretisch müsste das bei mir funktionieren, da ich die Player in einem Menü eingebaut hab. Hat da jemand eine Idee?
Hier meine Testseite: https://jonasreinsch.de/index.php/audio-test
Vielen Dank, j.
-
Hi Jonas ,
kannst du bitte dein Script zeigen bzw. welchen Spoiler Modul benutzt du ?
Mich interessiert ob du auch versucht hast Scrip in 2 verschiedenen Beiträgen hinzufügen , mit verschiedenen Audio Lieder , funktioniert dann noch Temporegler ?
Danke
LG
Vitalis
-
Hallo Vitalis,
da ich das für ein eventuell kommendes Projekt getestet hatte, habe ich mir selbst eine Anleitung als Reminder geschrieben (siehe txt anbei).
Grundsätzlich kannst du nur eine ID pro Seite vergeben. D.h. auch wenn du zwei Beiträge nebeneinander darstellst, sind sie dennoch in diesem Moment in einer html-Seite. Dann wird evtl. trotz der Darstellung der Player und Play-Funktion bei allen Scripts höchstens die erste findbare ID funktionieren. Alle weiteren identischen IDs sind nicht relevant.
Man kann bestimmt etwas anderes programmieren (was ich nicht kann). Ich habe somit, ziemlich grob, iframes eingesetzt. Bei diesen Wrappern werden komplette html-Seiten generiert, die in der "Mutter"-html-Seite sitzen. Da jeder meiner Player in einem iframe eingeschlossen ist, behindern sich die IDs nicht und der script funktioniert für alle Player.
Wie man Beiträge in iframes packt, hatte ich früher schon einmal recherchiert und steht auch im txt anbei.
Leider wird bei der Methode etwas viel html-code erzeugt … und Programmierer verdrehen die Augen. Da ich nichts besseres gefunden habe – weder fertige Player noch bessere scripts – muss es erst einmal so gehen.
Dir frohes Basteln,
LG, Jonas
-
Hallo Jonas,
Danke für super Anleitung, werde beim nächsten Projekt ausprobieren und anwenden .
Hallo zusammen ,
Vielen Dank für euere Hilfe in Forum !
Somit ist Beitrag " MP3 / Audio Player mit Geschwindigkeitsregelung " als erledigt markiert .
Liebe Grüße
Vitalis