Best answer by npetrov937
View original
Allow user to start video but not pause it
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?
Userlevel 4
+4
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.
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.
Userlevel 4
+4
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.
My code is in the attached file as I am getting a weird error when I try to put it below.
Good luck.
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.
Userlevel 4
+4
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.
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.
Thank you so much; it worked!
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....
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:
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.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.