0 votes
in SoSci Survey (dt.) by s215571 (110 points)

Hey,

in our survey we show videos (mp4) to our participants. The participants are not sopposed to be able to stop the video and should be sent to the next page automatically after finishing the video. Our code works on Android and Windows, but on iOS users are able to pause the video. How are we able to prevent that?

Thank you for you help!

by SoSci Survey (303k points)
Please add your current HTML code, thank you.
by s215571 (110 points)
Hope you can see all of it:

<p></p>
<Video id="Blume" width="512" height="288" controls >
<source src="Blume.mp4" type="video/mp4">
</video>
<script type="text/javascript">
<!--
var video = document.getElementById("Blume");
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {Blume.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
SoSciTools.submitButtonsHide();
});
// -->
</script>
<script>
var aud = document.getElementById("Blume");
aud.addEventListener("ended", function() {SoSciTools.submitPage()});
</script>

1 Answer

0 votes
by SoSci Survey (303k points)

The controls attribute usually tells the browser to display or hide (if not present) the video controls, including play button, timeline and/oder volumen control.

If you code is not working, this can have two reasons:

(1) The safari browser ignores that the control attribute is removed after the video started playing. Apple always knows better than the web developers what is good for their users :)

(2) The script does not run properly. Maybe Safari does not accept Blume instead of document.getElementById("Blume").

First trial I recommend would be to replace

Blume.removeAttribute("controls");

by the full code

document.getElementById("Blume").removeAttribute("controls");

If that does not work, define some CSS on your questionnaire page, using pageCSS(), for sxample. Namely

*::-webkit-media-controls {
    display: none!important;
    -webkit-appearance: none;
}

For a more fine-grained selection see https://gist.github.com/benfrain/8952179

If you are not successful, please the post a pretest link to the page in question.

by s215571 (110 points)
Thank you for your help. The first solution solved the problem on some apple devices, but not on all. I'm not sure thogh, if I implemented the pageCSS correctly, the HTML-Code is below. This is our pretest link: https://www.soscisurvey.de/EmpraSoSe22/?act=I8N9wFN9flnVGpUOMSrocMIn

<p></p>
<Video id="Blume" width="512" height="288" controls >
<source src="Blume.mp4" type="video/mp4">
</video>
<script type="text/javascript">
<!--
var video = document.getElementById("Blume");
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
document.getElementById("Blume").removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
SoSciTools.submitButtonsHide();
});
// -->
</script>
<script>
var aud = document.getElementById("Blume");
aud.addEventListener("ended", function() {SoSciTools.submitPage()});
</script>
<style>
pageCSS( '*::-webkit-media-controls {
    display: none!important;
    -webkit-appearance: none;
}');
</style>
by SoSci Survey (303k points)
Would you please post a link direktly to the page with the video? Thank you.

Please also specify which Apple devices do not yet cooperate.
by s215571 (110 points)
by SoSci Survey (303k points)
Please double-check if you added the CSS (the part with pageCSS()) as PHP code. The CSS code currently does not show up in the page's source.

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

...