Hello all, as in my last discussion post, I am trying to make a video in Qualtrics that has not been loading properly. The video is coded such that it autoplays, is pinned to the top of the page (so that respondents don’t have to scroll down to view it), and can be responded to with the keyboard (e.g., pressing “J” to answer a question about the video). Although this code has worked, when the video loads, it glitches, like so (at the 2 and 7-second marks):
This glitching looks a little different with each test, but regardless, it occurs consistently and on all browsers tested (Chrome, Safari, Firefox). Below is the most recently updated JavaScript and HTML code for the first video in the example attached. Since the last forum post, I have tried removing each code (keyboard responding, autoplaying, and pinning the video) one at a time in varying combinations to see if any one function is the problem, but the issue occurred in all combinations. I would really, really appreciate any help as to what might be wrong!
<video autoplay="" class="qmedia" height="400" preload="metadata" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/quicktime" width="800" /></video>
Qualtrics.SurveyEngine.addOnload(function() {
var base_element = document.querySelector(".SkinInner");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');
var new_element = document.querySelector("#sticky_vid");
new_element.innerHTML = '<video autoplay class="qmedia" height="400" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/mp4" /><embed align="middle" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/quicktime" width="800" /></video>';
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;
this.hideNextButton();
this.hidePreviousButton();
var that = this;
document.addEventListener('keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'J' was pressed
choiceID = 1;
break;
case 75: // 'K' was pressed
choiceID = 2;
break;
}
if (choiceID) {
document.removeEventListener('keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
