How do I write the HTML code so pausing a video is not possible on IOS?

Question

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!

Comments

Please add your current HTML code, thank you.

---

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>

Answer 1

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.

Comments

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>

---

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.

---

https://www.soscisurvey.de/EmpraSoSe22/index.php?i=VWOSBKE51K7V&rnd=IVBG

It doesn't work on iPhones. Thank you!

---

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.