Beiden Videos haben die gleiche ID.
id="myVideo"
Eine ID darf es nur einmal auf einer Seite geben. Kannst du diese selbst ändern?
wie mach ich das ?
mit id="myVideo1" id="myVideo2" funktioniert leider nicht
Beiden Videos haben die gleiche ID.
id="myVideo"
Eine ID darf es nur einmal auf einer Seite geben. Kannst du diese selbst ändern?
wie mach ich das ?
mit id="myVideo1" id="myVideo2" funktioniert leider nicht
Hi Anka
Ja klar , das ist meine Test Seite http://iptv.es.ht
Hab 2 Module erstellt mit diesem ORIGINAL Script und ausgeschaltet Editor - TinyMCE , neuen Beitrag erstellt und eingefügt :
<p>{module Eigenes Modul 1}</p>
<p>{module Eigenes Modul 2}</p>
Ergebnis : Video 1 (Modul 1) Tempo Regler funktioniert , Video 2 (Modul 2) Tempo Regler funktioniert nicht.
Ich will eigentlich nur einen Tempo Regler wo unter dem Player steht , um Chor Music zu üben : schneller oder langsamer .
Uns es soll ziemlich einfach sein , Regler soll nicht versteckt sein in Player Panel .
<!DOCTYPE html>
<html>
<head>
<script>
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);
};
</script>
<style>
.holder {
width:640px;
height:360;
margin: 0 auto;
margin-bottom:14em;
}
#pbr {
width:100%;
}
</style>
</head>
<body>
<div class="holder">
<video id="myVideo" 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="pbr" type="range" value="1"
min="0.5" max="4" step="0.1" >
<p>Playback Rate <span id="currentPbr">1</span></p>
</form>
</div>
</body>
</html>
Alles anzeigen
update:
- mit der Audio Datei hab ich hingekommen , einfach mp3 Adresse eingegeben anstatt Video Datei Adresse->Fertig
- leider das gleiche Script zwei oder 3 mal in einem Betrag funktionirt nicht , Tempo Regler funktioniert nur mit erste mp3 ...,bei der zweite mp3 funktioniert nur play .
Kann mir bitte jemand mit dem Script helfen ?
Danke
Lies doch einfach die Anleitungen: Wie iFrame- oder JavaScript-Code in einen Beitrag ohne das Code bereinigt wird.
Vielen Dank für Link ! Hat mir geholfen
Ungeachtet dessen, dass ich nicht weiß, wer "Alex" ist, kannst du mit dem Code meines Wissens die Geschwindigkeit nicht per Regler steuern.
Axel
Axel , Sorry
Zitatmeines Wissens die Geschwindigkeit nicht per Regler steuern
es geht, Regler funktioniert endlich :
- TinyMCE Editor unter Systemkonfiguration abschalten
- Im Beitrag erscheint dann nur der Quellcode
- Quellcode eintragen ,speichern
- TinyMCE Editor wieder einschalten
<h1></h1>
<p></p>
<p><main> <video width="300" height="150" id="videoElement" controls="controls" poster="velocity-thumbnail.jpg">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)" />
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)" />
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4" />
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm" />
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
<p class="controls"><label>playbackRate: <input type="range" step="0.1" min="0.5" max="2" value="1" id="rateSlider" /></label> <span id="rateOutput" aria-live="polite"></span></p>
</main></p>
<p></p>
<aside></aside>
<footer></footer>
<p>
<script>// <![CDATA[
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
(function() {
'use strict';
var video = document.getElementById("videoElement");
var rateOutput = document.getElementById('rateOutput');
var rateSlider = document.getElementById('rateSlider');
rateSlider.onchange = function(event) {
// When the slider is moved, changed the video's playback rate
video.playbackRate = rateSlider.value;
};
video.onplay = function(event) {
// We can only change the playbackRate once the video has started playing
video.playbackRate = rateSlider.value;
};
video.onratechange = function(event) {
// When the playback rate changes, display the new value
rateOutput.textContent = video.playbackRate;
// And let's have some colourful fun while we're here
document.body.style.background = 'hsl(' + (video.playbackRate * 180) + ', 50%, 15%)';
};
rateOutput.textContent = rateSlider.value;
})();
// ]]></script>
</p>
Alles anzeigen
nur noch kleines Problem, jetzt muss man noch anstatt Video meine MP3 Audios eintragen und eventuell
hier noch was ändern, da sich Hintergrund bei playbackRate schon ab 1.2 farblich ändert.
Du hast Deinen Editor nicht so konfiguriert dass der Code nicht gefiltert werden soll.
TinyMCE habe jetzt -> script,applet,iframe entfernt .Funktioniert HTLM Audio Regler trotzdem nicht.
Soll ich anderen Editor installieren ?
Du hast Deinen Editor nicht so konfiguriert dass der Code nicht gefiltert werden soll.
Alles zum Thema findest Du in unseren Anleitungen.
Hi Tom
gebe mir bitte direkten Link .
Mein HTML ist bestimmt auf 5 %
p.s. noch ein Code gefunden , der ziemlich gut ist , und über Opera koppiert und mit Online HTML bearbeitet , leider ändern sich die Farben nach dem man Tempo ändert ...
Für einen passenden Modul oder Plugin in bin ich bereit zu bezahlen , ich verliere so viel Zeit mit hier und her probieren .
<h1></h1>
<p></p>
<p><main> <video width="300" height="150" id="videoElement" controls="controls" poster="velocity-thumbnail.jpg">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)" />
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)" />
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4" />
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm" />
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
<p class="controls"><label>playbackRate: <input type="range" step="0.1" min="0.5" max="2" value="1" id="rateSlider" /></label> <span id="rateOutput" aria-live="polite"></span></p>
</main></p>
<p></p>
<aside></aside>
<footer></footer>
<p>
<script>// <![CDATA[
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
(function() {
'use strict';
var video = document.getElementById("videoElement");
var rateOutput = document.getElementById('rateOutput');
var rateSlider = document.getElementById('rateSlider');
rateSlider.onchange = function(event) {
// When the slider is moved, changed the video's playback rate
video.playbackRate = rateSlider.value;
};
video.onplay = function(event) {
// We can only change the playbackRate once the video has started playing
video.playbackRate = rateSlider.value;
};
video.onratechange = function(event) {
// When the playback rate changes, display the new value
rateOutput.textContent = video.playbackRate;
// And let's have some colourful fun while we're here
document.body.style.background = 'hsl(' + (video.playbackRate * 180) + ', 50%, 15%)';
};
rateOutput.textContent = rateSlider.value;
})();
// ]]></script>
</p>
Alles anzeigen
Danke
Hi Alex ,
hier hab ich code gefunden , aber wenn ich in neuem Beitrag ( Joomla! 3.9.2 Stable , Safari oder Opera ) Code einfüge, funktioniert nur Video , der Geschwindigkeit Regler funktioniert nicht . Auf Live HTML Ansicht ( nicht auf meine Homepage) , aber unter Opera funktioniert alles einwandfrei .
Irgendwas mach ich falsch ...
<!DOCTYPE html>
<html>
<head>
<script>
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);
};
</script>
<style>
.holder {
width:640px;
height:360;
margin: 0 auto;
margin-bottom:14em;
}
#pbr {
width:100%;
}
</style>
</head>
<body>
<div class="holder">
<video id="myVideo" 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="pbr" type="range" value="1"
min="0.5" max="4" step="0.1" >
<p>Playback Rate <span id="currentPbr">1</span></p>
</form>
</div>
</body>
</html>
Alles anzeigen
Hallo zusammen,
verstehe nicht warum , aber Beitrag wird immer wieder als "Erledigt" markirt ?
Leider bin ich weiter gekommen, vielleicht mit HTML Code oder Java einen Player erstellen ?
Kann mir jemand dabei helfen ?
sowas vielleicht ? Komme aber mit dem Code nicht weiter...
<div class="holder"><video id="myVideo" controls="controls" width="300" height="150">
<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="pbr" max="4" min="0.5" step="0.1" type="range" value="1" />
<p>Playback Rate <span id="currentPbr">1</span></p>
</form></div>
Guten Morgen liebe Joomla-Community,
bin auf der suche nach einem Player Audio oder auch Video Player mit Geschwindigkeitsregelung für Mp3 und Midi Dateien für meine Chorgemeinschaft.
Bis jetzt hab ich den Joomla HTML5 Audio Plugin , will aber gerne sowas wie auf Choralia mit dem Regler für Geschwindigkeit bzw. Tempo .
Das kann auch was ganz einfaches sein , wichtig dass der Regler unter dem Player ist wie auf dem Bild zusehen .
Hab mir schon den Royal Audio Player angeschaut , da ist aber Regler ganz versteckt.
Würdet Ihr mir bitte was empfehlen ?
Liebe Grüße und einen schönen Sonntag
Vitalis