0 votes
in SoSci Survey (dt.) by s092315 (220 points)

]Ich habe nun versucht, den HTML-Code entsprechend der Empfehlung oben anzupassen. Derzeit wird dann das Video automatisch angezeigt und der Knopf. Wenn ich den Knopf clicke, dann wird eine Seite im Fragebogen aufgerufen und nicht das Video.

Für Tipps bin ich sehr dankbar!

related to an answer for: Video optional einblenden
by s109993 (9.9k points)
Das hört sich so an als hätten sie nur einen Button erstellt, in aber nicht (oder falsch) mit Java Script "hinterlegt". Können Sie bitte den dazugehörigen java script Code posten und ggf. noch einen Pre- Test link? Auch wäre es schön wenn Sie den Code als Text einfügen würden, und nicht als Bild :)

Viele Grüße
by SoSci Survey (303k points)
Sie scheinen entweder zwei Videos einzubinden oder das gleiche Video zweimal. Einmal verweisen Sie auf video.mp4, einmal auf 01Willkommen.mp4. Erste Frage: Ist das beabsichtigt? Oder soll das Video einfach nur aufploppen (wie eine Info-Box), wenn Sie einen Knopf klicken?

Disclaimer: Die Antwort, auf die Sie verlinken, kann ich nur bedingt nachvollziehen. Diese stammt nicht von SoSci Survey, sondern von einem anderen Nutzer. Sie muss nicht falsch sein, aber ich bin nicht sicher, ob es Ihren Anwendungsfall genau trifft. In jedem Fall fehlt m.E. das zugehörige JavaScript.
by s092315 (220 points)
Leider klappt das bisher nicht. Genau, ich möchte, dass das Video wie eine Info-Box aufploppt, wenn der Nutzer (optional) auf einen Knopf klickt. Das Video soll ein Angebot in DGS sein, das nur eingeblendet wird, wenn der Befragte, den entsprechenden DGS-Knopf klickt. Sonst kann der Befragte auch ohne Video auf die nächste Seite klicken - so die Idee. Nur an der Umsetzung hapert es noch. Daher bin ich sehr dankbar für Tipps.
Der momentane Code:
// Der Java Versuch:

pageCSS(.vid {
    width: "100vw";
    height: "400px";
    object-fit: "cover";
    z-index: "-1";
    position: "absolute";
    background-color: "black";
}
#yt {
    display: "none";
}
#content {
}
p {
    color: "white";
    font-size: "20pt";
    text-align: "center";
    padding-top: "100px";
}
button {
    width: "100px";
    height: "30px";
});
$("button").click(function () {
    $("#content").hide();
    $("#yt")[0].src += "?autoplay=1";
    setTimeout(function(){ $("#yt").show(); }, 200);
});

//HTML-CODE:

<video class="vid" autoplay loop>
    <source src="video.mp4" type='video/mp4' />
    <img id="alternative" src="alternative.jpg" />
</video>
<iframe class="vid" id="yt" src="01Willkommen.mp4"
frameborder="0" allowfullscreen></iframe>
<div id="content">
    <center>
        <button>DGS</button>
    </center>
</div>

2 Answers

0 votes
by SoSci Survey (303k points)

Der genannte JavaScript-Code kann nicht funktionieren, weil er jQuery (eine JavaScript-Biblipthek) verwendet, Sie diese aber - soweit ich sehe - in der Fragebogen-Seite nicht einbinden.

Versuchen Sie es bitte einmal wie folgt. Zuerst einmal kümmern Sie sich darum, dass das Video an der richtigen Stelle erscheint:

Hier noch der Text vom Item...
<button id="stimulusButton" type="button">Video</button>
<span style="position: relative">
  <video id="stimulus" controls style="position: absolute; left: -200px; top: 20px; width: 640px;">
      <source src="video.mp4" type='video/mp4' />
      <img id="alternative" src="alternative.jpg" />
  </video>
</span>

Die Größe (640px) passen Sie bitte an, und natürlich auch den Dateinamen für das Video (video.mp4) und sofern sie ein Bild zur Überbrückung der Ladezeit vorbereitet haben auch den Dateinamen des Bildes (alternative.jpg). Wenn nicht, dann lassen Sie diese Zeile weg. Die Position (angegeben durch "top" und "left") passen Sie auch an.

Wenn alles soweit funktioniert, sollte das Video unter dem Item (oder wo auch immer Sie den HTML-Code einfügen) erscheinen und auf einen Klick hin starten.

Nun ergänzen Sie weiter unten (entweder im Item oder als Textbaustein unter der Frage) ein wenig JavaScript-Code, welcher das Video erstmal ausblendet und dann auf einen Klick hin einblendet.

<script type="text/javascript">
var btn = document.getElementById("stimulusButton");
var video = document.getElementById("stimulus");
var videoVisible = false;

function toogleVideo() {
  if (videoVisible) {
    video.style.display = "block";
    video.play();
  } else {
    video.stop();
    video.style.display = "none";
  }
}

btn.addEventListener("click", function() {
  videoVisible = !videoVisible;
  toogleVideo();
});

toogleVideo();
</script>

Wenn das so noch nicht funktioniert, posten Sie bitte einmal die Fehlermeldung aus der JavaScript-Konsole Ihres Browsers (die finden Sie mit der Hilfe der Suchmaschine Ihrer Wahl) und einen Pretest-Link direkt (!) zur betroffenen Seite des Fragebogens. Danke.

0 votes
by s092315 (220 points)
edited by s092315

Vielen Dank für die Tipps!
Leider bekomme ich es immer noch nicht ganz hin und komme nicht auf den Fehler. Das Video startet zwar nun auf Knopfdruck, jedoch wird es gleich zu Beginn der Nutzung angezeigt und nicht erst auf Knopfdruck.

Der Code ist folgender:

<button id="stimulusButton" type="button">DGS</button>


  <source src="01Willkommen.mp4" type='video/mp4' />
  <img id="alternative" src="DGS.png" />



var btn = document.getElementById("stimulusButton");
var video = document.getElementById("stimulus");
var videoVisible = false;

function toogleVideo() {
if (videoVisible) {

video.style.display = "block";
video.play();

} else {

video.stop();
video.style.display = "none";

}
}

btn.addEventListener("click", function() {
videoVisible = !videoVisible;
toogleVideo();
});

toogleVideo();

Der Pre-Test Link

by SoSci Survey (303k points)
Könnten Sie PHP-/JavaScript-Code bitte mit dem Knopf [{}] als solchen formatieren? Das ist der Lesbarkeit sehr zuträglich.

Die JavaScript-Konsole meldet: video.stop is not a function.

Das heißt, dass die Funktion toogleVideo() noch minimal ergänzt werden muss:

function toogleVideo() {
  if (!video) {
    return;
  }
  if (videoVisible) {
    // u.s.w.
by s092315 (220 points)
Vielen Dank. Ich habe den Code entsprechend eingefügt. Leider ist immer noch das Video von Anfang an als Bild sichtbar und nicht erst auf Knopfdruck. Gibt es eine Möglichkeit, das zu ändern?
by SoSci Survey (303k points)
Wir nähern uns ... jetzt müssten SIe bitte das video.stop() noch in video.pause() ändern. Den Namen der Funktion hatte ich leider falsch in Erinnerung...

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...