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

Frage Ton bei automatisch gestarteten und zunächst stummgeschalteten Video nachträglich ein- & ausschalten

boomer

boomer

Neues Mitglied
Hallo in die Runde,

ich stehe vor folgender Aufgabe:

Ich will ein Video einbetten, welches automatisch abgespielt wird. Soweit kein Problem. Allerdings kommt jetzt der Punkt, bei dem ich an meinen Grenzbereich ankomme: Es soll kein Ton abgespielt werden (wäre ja mute), die Steuerung soll ausgeblendet werden - aber es soll eine Option geben, den Ton ein- oder auszuschalten.

Wenn ich die Steuerung ausschalte, so ist auch der Button Ton ein / aus weg. Allerdings soll anfangs das Video still sein und dann auf Knopfdruck soll der Ton dazu kommen (z. B. wenn User in der S-Bahn auf die Seite kommen, dann wäre es nicht so angenehm, wenn gleich der Ton abgespielt wird).

Wer kann mir weiterhelfen?

Liebe Grüße und danke im Voraus
 
HTML: 
<video width="..." height="..." autoplay muted controls>
Beim Überfahren der Videofläche erscheint die Steuerungsleiste.

EDIT: Deinen allgemein formulierten Topic "Einbettung von Video" habe ich aussagekräftiger spezifiziert.
 
Hallo SpiceLab,

danke für Deine Antwort. Allerdings soll von der Steuerungsleiste nur die Option Ton ein / aus eingeblendet werden.

Liebe Grüße
Walter
 
boomer schrieb:
Allerdings soll von der Steuerungsleiste nur die Option Ton ein / aus eingeblendet werden.
Zum Vergrößern anklicken....
Interessant. Alles andere als benutzerfreundlich.

Mit HTML(5)-Mitteln keine Chance!

Und das ist auch gut so... im Namen der Usability, ein Video selbstbestimmt nach seinen eigenen Wünschen/Vorstellungen allumfassend mit den gewohnten Funktionen steuern zu können.

Andernfalls ist das mittels JavaScript und der volume-Eigenschaft zu manipulieren, um den Ton ohne Steuerungsleiste ein- und auszuschalten.

Aus dem anhänglichen volume-Demo wird dann beispielsweise:
HTML: 
<body>
    <button onclick="getVolume()" type="button">What is the volume?</button>
    <button onclick="setSilenceVolume()" type="button">Set volume to 0.0</button>
    <button onclick="setFullVolume()" type="button">Set volume to 1.0</button>
    <video id="myVideo" width="..." height="..." autoplay>...</video>
    <script>
       var vid = document.getElementById("myVideo");
       function getVolume() {
         alert(vid.volume);
       }
       function setSilenceVolume() {
         vid.volume = 0.0;
       }
       function setFullVolume() {
         vid.volume = 1.0;
       }
       window.onload = function() {
         setSilenceVolume();
       }
    </script>
</body>
Live-Demo: https://jsfiddle.net/SpiceLab/hb9ktqs4/

Hinweis: Falls im Umgang mit jsfiddle nicht vertraut, o.l. "Run" klicken, um für erneute Funktionsanalysen das 10-sekündige Video zu starten.

Aufgrund der hier vorliegenden technischen Lösung platziere ich das Thema abschließend im JS-Fachforum.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben