How to make a video play on Qualtrics | XM Community
Skip to main content
Dear all, I was wondering how I can make this HTML (attached) work on Qualtrics survey. Also regarding the JavaScript code (HTML) I will need it to make the skip ad button appearing next to the video screen, to be moved to the middle of screen and semi-transparent. I will appreciate any help...

Here is the code:



<html>

<head>



<style>

video::-webkit-media-controls-fullscreen-button

{

display: none !important;

}



</style>



</head>

<body>



<video id="myvideo" width="768" height="576" style="background:black" autoplay onplay="clock()" >

<source class="active" src="Advert.mp4" type="video/mp4" />

<source src="Main.mp4" type="video/mp4" />

</video>

<button style="height:50px;width:200px" class="ui red button" id="btn1" onclick="skip()" disabled>skip ad</button>



</body>

<script type="text/javascript">

var myvid = document.getElementById('myvideo');

myvid.addEventListener('ended', function(e) {

var activesource = document.querySelector("#myvideo source.active");

var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");

activesource.className = "";

nextsource.className = "active";

myvid.src = nextsource.src;

myvid.play();

myvid.controls=true;

});

myvid.onpause = function() {

window.clearInterval(myTimer);

};

function skip(){

var activesource = document.querySelector("#myvideo source.active");

var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");

activesource.className = "";

nextsource.className = "active";

myvid.src = nextsource.src;

myvid.play();

myvid.controls=true;

}

var myTimer;

var c = 12;

function clock() {

myTimer = setInterval(myClock, 1000);

function myClock() {

if (c <= 0 )

{

document.getElementById("btn1").disabled=false ;

document.getElementById("btn1").innerHTML = "SKIP AD";

}

else { if( document.getElementById("btn1").disabled==true){

document.getElementById("btn1").innerHTML = "skip ad in " + --c;

}}

}

}



</script>

</html>
Hi @AliBodyguard! It looks like this question was placed in the 'How to Use the Survey Platform' category. I have gone ahead and moved it to the Custom Code category, so more of our developer/ programmer community members will see it!



In the meantime, be sure to check out the following posts to help you get started:

* Embedded youtube videos - play only once, no related videos

* Query related to video
Thank you for your help, Lauren!

Leave a Reply


Terms & Conditions