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>
