How to make a video play on Qualtrics | XM Community
Solved

How to make a video play on Qualtrics

  • 16 October 2018
  • 2 replies
  • 145 views
A
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>
icon

Best answer by LaurenK 1 November 2018, 20:25

View original

2 replies

LaurenK
Rank
Userlevel 7
Badge +13
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
A
Thank you for your help, Lauren!

Leave a Reply


Terms & Conditions