Allow user to start video but not pause it | XM Community
Skip to main content
Solved

Allow user to start video but not pause it

  • March 4, 2020
  • 8 replies
  • 539 views
A
I want to embed a video into a survey. Is there code I can write that allows the user to start the video, but doesn't allow the user to pause the video after it starts?

Best answer by npetrov937

Hi @azhang21 , There were some typos in the code. HTML: ``<div id="question1" style="height=480px;width=640px;"><video class="qmedia" controls="true" height="640" preload="auto" width="360"><source src="YOURSOURCE" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="640" pluginspage="http://www.apple.com/quicktime/download/" src="YOURSOURCE" type="video/quicktime" width="360" /></video></div>`` Javascript: Qualtrics.SurveyEngine.addOnload(function() { jQuery("video").on('play', function() { jQuery("#question1")[0].style.pointerEvents = "none" }); }); Working .qsf attached. Good luck.

    8 replies

    npetrov937
    Level 2 ●●
    Forum|alt.badge.img+4
    • npetrov937
    • Level 2 ●●
    • March 16, 2020
    The short answer: No. However, there might be a few workarounds you can consider. First, you can autoplay the clip and then prevent the user from clicking on the video (ALL clicking including pausing, full screen etc). To do that, technically you autoplay the video; then put an invisible "div" element in front of your video and disable mouse events on that div. Here's sample code: `<div style="height=640px;width=360px;pointer-events:none;"> <video autoplay="true" class="qmedia" height="640" muted="true" preload="auto" width="360"><source src="YOURSOURCE" type="video/mp4" /></video> </div>` Second, you might want to allow the user to play the video themselves but then disallow any clicks. All you need to do is use javascript to add the invisible div element based on a condition: this condition can be either a set amount of time or something like "if the user clicked on the page". I don't see a way to make these conditions more precise than this, hence I would recommend the first way above. Good luck.
    npetrov937
    Level 2 ●●
    Forum|alt.badge.img+4
    • npetrov937
    • Level 2 ●●
    • March 16, 2020
    Okay, I might have been too rash in above reply. There might be a way around. Simply update the pointer-events of the hidden div element to none when the video My code is in the attached file as I am getting a weird error when I try to put it below. Good luck.
    1 Attachments
    A
    • azhang21
    • Author
    • March 17, 2020
    Hi! I couldn't get it to work. I'm still able to pause / play after the video starts. Here's my code in an attached file.
    1 Attachments
    npetrov937
    Level 2 ●●
    Forum|alt.badge.img+4
    • npetrov937
    • Level 2 ●●
    • Answer
    • March 17, 2020
    Hi @azhang21 , There were some typos in the code. HTML: ``<div id="question1" style="height=480px;width=640px;"><video class="qmedia" controls="true" height="640" preload="auto" width="360"><source src="YOURSOURCE" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="640" pluginspage="http://www.apple.com/quicktime/download/" src="YOURSOURCE" type="video/quicktime" width="360" /></video></div>`` Javascript: Qualtrics.SurveyEngine.addOnload(function() { jQuery("video").on('play', function() { jQuery("#question1")[0].style.pointerEvents = "none" }); }); Working .qsf attached. Good luck.
    A
    A
    • azhang21
    • Author
    • March 18, 2020
    Thank you so much; it worked!
    K
    • kyu
    • October 21, 2020

    I'm hoping someone on this thread (azhang21 or npetrov937 ) or someone else could help me with this. I am trying to do something similar but cannot seem to get it to work. The controls still show up and seem to keep working even once the video has started. I'm not sure I'm putting the right code in the right places, and the video only takes up a small portion of the window (there are white parts above and below, and the controls appear at the very bottom of the white portion beneath the video). Do I perhaps have the wrong height and width?
    I'd be so grateful for any responses; I have been trying to figure this out for days....

    S
    • San
    • November 5, 2020

    Hi!

    npetrov937! Do you mind helping me with this issue? I would also like my video to autoplay while having all of the controls disabled. I have tried to use your code above but my video just keeps buffering forever without actually playing. Could it be because I'm using a google drive video instead of a youtube video?
    My original code to embed the video without including any autoplay or invisible divs looks like this:


    C

    Hello!
    I am dealing with a similar problem where I want my participants to be able to press play on the video, but after pressing play, the video controls are disabled. I'm not able to get the provided code to work, so I'm wondering if this question is still active.
    I know that many users set their browsers so autoplay disabled, which is why I can't resort to the simpler option of setting up autoplay.

    Terms & ConditionsAccessibility statement