Skip to main content

Video and Audio

  • Updated

INTRO

  1. Audio wait some seconds to click the next
  2. Video wait some seconds to click next
  3. Adjust the width size of a video
  4. Adjust the width of a video and make wait some seconds
  5. Exit full screen after the video plays

Here are the different editable variables used on this type of function.

  • secondsBeforeProceeed: Here you can put the time in seconds you want the audio or video to be shown, it can be any, the countdown will start once the audio or video starts playing.
  • videoWidth: You can adjust the video width with values with percentages, pixels, or other valid values. You can use percentages like 50% or you can use pixels, for example, 400px.

 

Case 1 Audio wait some seconds to click the next

If you want to force the respondent to listen to some seconds of your audio, you can use JS to ensure it.

We have 3 cases for this.

  • Single Choice
  • Multiple Choice
  • Multiple Choice with an exclusive option

You will just need to replace one variable let secondsBeforeProceeed = 3; //edit to desired seconds to the desired time.

For the Single Choice version use this:

/* STARTS EDITING PART*/
let secondsBeforeProceeed = 3; //edit to desired seconds
/* ENDS EDITING PART*/

document.querySelector('#p_next').style.display = 'none';
let timeSeconds = secondsBeforeProceeed * 1000;

window.onload = function() {
    document.querySelector('.plyr__controls .plyr__controls__item:first-child').addEventListener('click', function () {
        setTimeout(function () {
            document.querySelector('#p_next').style.display = 'inline-block';
        }, timeSeconds); // 10000 milliseconds = 10 seconds
    });
};


For the multiple choice use:

/* STARTS EDITING PART*/
let secondsBeforeProceeed = 3; //edit to desired seconds
/* ENDS EDITING PART*/

document.querySelector('#p_next').style.display = 'none';
let timeSeconds = secondsBeforeProceeed * 1000;

window.onload = function() {
    document.querySelector('.plyr__controls .plyr__controls__item:first-child').addEventListener('click', function () {
        setTimeout(function () {
            document.querySelector('#p_next').style.display = 'inline-block';
        }, timeSeconds); // 10000 milliseconds = 10 seconds
    });
};


And if you have an exclusive option, for this, don’t make the option exclusive, the JS will make the last option exclusive.

/* STARTS EDITING PART*/
let secondsBeforeProceeed = 3; //edit to desired seconds
/* ENDS EDITING PART*/

document.querySelector('#p_next').style.display = 'none';
let timeSeconds = secondsBeforeProceeed * 1000;

window.onload = function() {
    document.querySelector('.plyr__controls .plyr__controls__item:first-child').addEventListener('click', function () {
        setTimeout(function () {
            document.querySelector('#p_next').style.display = 'inline-block';
        }, timeSeconds); // 10000 milliseconds = 10 seconds
    });
};

//quick fix for exclusive options
$('.form-check-label').last().css('background','#ddedfd');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();
let regularoptions = $('div.form-check input:checkbox').not(':last');

noneOfTheseCheckbox.click(function () {
    
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

 

Case 2 Video wait some seconds to click next

If you want to force the respondent to listen to some seconds of your video, you can use JS to ensure it.

We have 3 cases for this.

  • Single Choice
  • Multiple Choice
  • Multiple Choice with an exclusive option

You will just need to replace one variable let secondsBeforeProceeed = 3; //edit to desired seconds to the desired time.

For the Single Choice version use this:

/* STARTS EDITING PART */
let secondsToProceed = 3; // adjust the seconds as desired
/* ENDS EDITING PART */

let timeInSeconds = secondsToProceed * 1000;
document.querySelector('#p_next').style.display = 'none';

window.onload = function() {
  $('div.question > h5 > p > div').click(function () {
    setTimeout(function () {
      document.querySelector('#p_next').style.display = 'inline-block';
    }, timeInSeconds);
  });
}


For the multiple choice use:

/* STARTS EDITING PART */
let secondsToProceed = 3; // adjust the seconds as desired
/* ENDS EDITING PART */

let timeInSeconds = secondsToProceed * 1000;
document.querySelector('#p_next').style.display = 'none';

window.onload = function() {
  $('div.question > h5 > p > div').click(function () {
    setTimeout(function () {
      document.querySelector('#p_next').style.display = 'inline-block';
    }, timeInSeconds);
  });
}


And if you have an exclusive option, for this, don’t make the option exclusive, the JS will make the last option exclusive.

/* STARTS EDITING PART */
let secondsToProceed = 3; // adjust the seconds as desired
/* ENDS EDITING PART */

let timeInSeconds = secondsToProceed * 1000;
document.querySelector('#p_next').style.display = 'none';

window.onload = function() {
  $('div.question > h5 > p > div').click(function () {
    setTimeout(function () {
      document.querySelector('#p_next').style.display = 'inline-block';
    }, timeInSeconds);
  });
}

//quick fix for exclusive options
$('.form-check-label').last().css('background','#ddedfd');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();
let regularoptions = $('div.form-check input:checkbox').not(':last');

noneOfTheseCheckbox.click(function () {
    
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

 

Case 3 Adjust the width size of a video

You can edit the width of your video with JS if you are having problems.

You will just need to replace one variable let videoWidth = '50%'; // adjust to the desired width.

$(document).ready(function() {
    /* STARTS EDITING PART */
    let videoWidth = '50%'; // adjust
    /* ENDS EDITING PART */

    let videos = $('.plyr');
    videos.css({
        width: videoWidth,
        margin: '10px 25%'
    });
});

 

Case 4 Adjust the width of a video and make wait some seconds

If you want to force the respondent to listen to some seconds of your video, you can use JS to ensure it.

We have 3 cases for this.

  • Single Choice
  • Multiple Choice
  • Multiple Choice with an exclusive option

You will just need to replace one variable let secondsBeforeProceeed = 3; //edit to desired seconds to the desired time.

For the Single Choice version use this:

/* STARTS EDITING PART */
let secondsToProceed = 3; // adjust the seconds as desired
let videoWidth = '50%';
/* ENDS EDITING PART */

let timeInSeconds = secondsToProceed * 1000;
document.querySelector('#p_next').style.display = 'none';

window.onload = function() {
  $('div.question > h5 > p > div').click(function () {
    setTimeout(function () {
      document.querySelector('#p_next').style.display = 'inline-block';
    }, timeInSeconds);
  });
}

$(document).ready(function() {
    let videos = $('.plyr');
    videos.css({
        width: videoWidth,
        margin: '10px 25%'
    });
});


For the multiple choice use:

/* STARTS EDITING PART */
let secondsToProceed = 3; // adjust the seconds as desired
let videoWidth = '50%';
/* ENDS EDITING PART */

let timeInSeconds = secondsToProceed * 1000;
document.querySelector('#p_next').style.display = 'none';

window.onload = function() {
  $('div.question > h5 > p > div').click(function () {
    setTimeout(function () {
      document.querySelector('#p_next').style.display = 'inline-block';
    }, timeInSeconds);
  });
}

$(document).ready(function() {
    let videos = $('.plyr');
    videos.css({
        width: videoWidth,
        margin: '10px 25%'
    });
});


And if you have an exclusive option, for this, don’t make the option exclusive, the JS will make the last option exclusive.

/* STARTS EDITING PART */
let secondsToProceed = 3; // adjust the seconds as desired
let videoWidth = '50%';
/* ENDS EDITING PART */

let timeInSeconds = secondsToProceed * 1000;
document.querySelector('#p_next').style.display = 'none';

window.onload = function() {
  $('div.question > h5 > p > div').click(function () {
    setTimeout(function () {
      document.querySelector('#p_next').style.display = 'inline-block';
    }, timeInSeconds);
  });
}

//quick fix for exclusive options
$('.form-check-label').last().css('background','#ddedfd');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();
let regularoptions = $('div.form-check input:checkbox').not(':last');

noneOfTheseCheckbox.click(function () {
    
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

$(document).ready(function() {
    let videos = $('.plyr');
    videos.css({
        width: videoWidth,
        margin: '10px 25%'
    });
});

 

Case 5 Get off fullscreen after the video plays

NOTE: This code still needs to be tested more in depth in mobile phones.

If you want to force respondents into full screen and then get it into regular view after watching or pausing the video you can use the following JS.

/* STARTS EDITING PART */
let videoWidth = '50%';
/* ENDS EDITING PART */

$(document).ready(function() {
    let videos = $('.plyr');
    videos.css({
        width: videoWidth,
        margin: '10px 25%'
    });
});

// fullscreen.js
$(document).ready(function() {
    function handleFullscreen(target) {
        if ($(target).hasClass('plyr--paused')) {
            if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { // Firefox
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { // IE/Edge
                    document.msExitFullscreen();
                }
            }
        } else if ($(target).hasClass('plyr--playing')) {
            var video = target.querySelector('video');
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) { // Firefox
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { // IE/Edge
                video.msRequestFullscreen();
            }
        }
    }

    var targetNode = $('div.question > h5 > p > div')[0];

    var config = { attributes: true, attributeFilter: ['class'] };

    var callback = function(mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                handleFullscreen(mutation.target);
            }
        }
    };

    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);

    // Ensure it works on mobile by adding touch event listeners if needed
    $('div.question > h5 > p > div').on('touchend', function() {
        var target = this;
        setTimeout(function() { handleFullscreen(target); }, 100); // Add slight delay to allow for touch interaction
    });
});

Implement the codes as needed.