Video im Fragebogen OHNE Bedienungshilfen anzeigen lassen

Question

Ich bin aktuell in der Pre-Test Phase.

ich habe in meiner Umfrage ein selbst erstelltes Video integriert.
Es wird auf dem Laptop als auch am Handy erfolgreich angezeigt.
Allerdings funktioniert es nur am Laptop, dass dem Teilnehmer die Möglichkeit genommen wird, das Video während des Schauens zu stoppen, überspringen, vor-/zurückzuspulen. Die Teilnehmer auf dem Handy können dies leider tun. Das soll verhindern werden.
Die Teilnehmer sollen das Video also verpflichtend zu Ende gucken und sollen nicht die Möglichkeit haben, es zu stoppen oder skippen.

Ich bitte um Erklärung, was ich folglich an meinem aktuellen HTML-Code ändern muss:
(siehe Kommentar)

Comments

Der aktuelle HTML-Code:

<video width="512" height="288" controls controlsList="nodownload" id="stimulus">
  <source src="Pinterestvideo.mp4" type="video/mp4" />
  <source src="Pinterestvideo.webm" type="video/webm" />
  <source src="Pinterestvideo.ogg" type="video/ogg" />
</video>


<script type="text/javascript">
<!--
var video = document.getElementById("stimulus");

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

// -->
</script>

Answer 1

Ich bitte um Erklärung, was ich folglich an meinem aktuellen HTML-Code ändern muss

Entfernen Sie aus dem <video>-Tag bitte das controls Attribut.

Falls Sie unsicher sind, was ein Tag und ein Atrribut ist, dann lesen Sie bitte hier die kompakte Übersicht zu den Grundlagen von HTML: https://de.w3docs.com/html-lernen/html-einfuhrung.html - bei der Arbeit mit HTML-Code ist dieses Hintergrundwissen sehr zu empfehlen.

Comments

Also so?:


<video width="512" height="288" controlsList="nodownload" id="stimulus">
  <source src="Pinterestvideo.mp4" type="video/mp4" />
  <source src="Pinterestvideo.webm" type="video/webm" />
  <source src="Pinterestvideo.ogg" type="video/ogg" />
</video>


<script type="text/javascript">
<!--
var video = document.getElementById("stimulus");

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

// -->
</script>


so richtig, oder muss das:  controlsList="nodownload" id="stimulus">
auch weg????


Mir wurde gesagt, dass ich das "controls" Attribut nach einigen Sekunden ergänzen soll, da es sonst Probleme geben könnte, wenn das Video nicht automatisch abgespielt wird. Ich sollte mir dafür die JavaScript-Referenzen zu setTimeout() und addAttribute() an.
Ich verstehe aber nicht was ich machen soll :((((
Können Sie hierbei bitte helfen?
danke!

---

Wahrscheinlich darf das "controlsList" bleiben, da habe ich die genaue Spezifikation nicht im Kopf, die "id" darf auf alle Fälle bleiben.

> Mir wurde gesagt, dass ich das "controls" Attribut nach einigen Sekunden ergänzen soll, da es sonst Probleme geben könnte

Es kann passieren, dass das Video nicht automatisch startet. Vor allem nicht auf Mobilgeräten. Und wenn man keine Kontrollelemente hat, dann können es die Befragten auch nicht manuell starten. Sollte sich das als Problem erweisen, könnten Sie mal so etwas in der Art testen:

window.setTimeout(function() {
  var video = document.getElementById("stimulus");
  if (video.currentTime < 1) {
    video.addAttribute("controls", true);
  }
}, 3000);

Ob die mobilen Browser so flexibel sind, dass das auch funktioniert, kann ich aber nicht pauschal sagen. Da werden Sie einfach ein wenig testen müssen.

---

Kommt das, was sie gerade geschrieben haben:

 window.setTimeout(function() {
  var video = document.getElementById("stimulus");
  if (video.currentTime < 1) {
    video.addAttribute("controls", true);
  }
}, 3000);

dann einfach genauso in den selben Textbaustein hinter meinen vorherigen HTML-Code? oder irgendwo zwischen??

---

Es muss im HTML-Code innerhalb eines <script>-Tags stehen, vgl. https://www.soscisurvey.de/help/doku.php/de:create:javascript

---

Ich verstehe es nicht. Ich arbeite daran seit einer Woche jeden Tag und kriege nur Antworten die alle was anderes sagen, oder mich auf andere Seiten verlinken. ;((((

Ich habe als erstes folgenden HTML-Code eingesetzt:

<video width="512" height="288" controlsList="nodownload" id="stimulus">
  <source src="Pinterestvideo.mp4" type="video/mp4" />
  <source src="Pinterestvideo.webm" type="video/webm" />
  <source src="Pinterestvideo.ogg" type="video/ogg" />
</video>

<script type="text/javascript">
<!--
var video = document.getElementById("stimulus");

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

// -->
</script>


und danach nach folgenden HTML-Code:

<script type="text/javascript">
<!--

 window.setTimeout(function() {
  var video = document.getElementById("stimulus");
  if (video.currentTime < 1) {
    video.addAttribute("controls", true);
  }
}, 3000);
 
// -->
</script>


Und ich habe beide HTML-Code nach einander auf der Seite platziert.
Jetzt wird das Video gar nicht mehr angezeigt!!!! ;((
 Wo liegt der Fehler?
Ich will doch einfach nur, dass die Leute am Handy das Video NICHT vor oder zurück kippen können und erst den "Weiter" Button drücken können, wenn sie es zu Ende gesehen haben. Bei den Leuten am Laptop funktioniert das mit meinem ursprünglichen HTML-Code ganz normal und sie MÜSSEN es zu Ende gucken und können es nicht skippen. Das war der ursprüngliche HTML-Code (womit es am Handy aber nicht funktioniert wie ich es will):

<video width="512" height="288" controls controlsList="nodownload" id="stimulus">
  <source src="Pinterestvideo.mp4" type="video/mp4" />
  <source src="Pinterestvideo.webm" type="video/webm" />
  <source src="Pinterestvideo.ogg" type="video/ogg" />
</video>


<script type="text/javascript">
<!--
var video = document.getElementById("stimulus");

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

// -->
</script>




HILFEEEEE

---

> Ich arbeite daran seit einer Woche jeden Tag und kriege nur Antworten die alle was anderes sagen, oder mich auf andere Seiten verlinken. ;((((

Bitte haben Sie Verständnis dafür, dass wir Ihnen den Fragebogen nicht programmieren können. Dafür reichen - bei mehr als 10.000 Befragungsprojekten jedes Jahr - unsere Ressourcen einfach nicht.

Die Anleitungen, die ich verlinke, erklären die Hintergründe. Und dort steht auch recht genau beschrieben, wo JavaScript-Code im Fragebogen platziert werden muss. Wenn das nicht genau genug ist, beziehen Sie sich gerne konkret auf die unklare Stelle in der Anleitung - dann formulieren wir das genauer.

Wenn Sie Sonderwünsche umsetzen möchten, dann müssen Sie ein wenig tiefer in den HTML-Code eingreifen ... und sich ein paar Details auch selbst erarbeiten. Dazu betone ich auch nocheinmal, dass jeder Browser ein wenig anders ist. Und wenn die Browser-Hersteller von Apple der Meinung sind, dass Sie als Web-Inhalte-Anbieter doch bitte nicht am Video-Abspielverhalten des Browsers herumspielen sollen, dann ist der Browser evtl. nur aufwändig oder gar nicht zur Mitarbeit zu überreden.

Ich müsste hier genauso die Suchmaschine meiner Wahl bemühen wie Sie.

> Jetzt wird das Video gar nicht mehr angezeigt!!!! ;((
> Wo liegt der Fehler?

Die Fehlersuche wir hier beschrieben: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools#javascript-probleme

Ja, wieder ein Link. Denn es kostet mich genauso viel Zeit, alle möglichen Fehlerquellen abzuklappern wie Sie. Vermutlich mehr, denn Sie können einfach die Seite mit den Entwicklertools ansehen und prüfen, was in der Fehlerkonsole als Fehler ausgeworfen wird und auf welche Stelle im Code sich das bezieht.

Wenn Sie bei der Interpretation Unterstützung benötigen, melden Sie sich gerne wieder.

> Ich will doch einfach nur, dass die Leute am Handy das Video NICHT vor oder zurück kippen können und erst den "Weiter" Button drücken können, wenn sie es zu Ende gesehen haben.

Für die meisten Teilnehmer:innen ist dieser Wunsch je bereits mit der ursprünglichen Lösung erfüllt. Und wenn es von den Handy-Nutzer:innen doch jemand macht, lässt sich das anhand der Antwortzeiten ohnehin ganz gut bereinigen. Wenn Ihnen das nicht ausreicht ... dann ist eben etwas Zusatzarbeit angesagt. Und es gibt keine Garantie, dass es dann mit dem nächsten Browser-Update noch funktioniert.