URL of the experiment: https://run.pavlovia.org/arkadiym/pic_rate_a_1/html
Description of the problem: Everything runs smoothly but the experiment takes a long time to load. I was wondering if there might be a way to expedite the loading process at the beginning.
Not right now. Yes, we download all the materials to the participant before starting to ensure that there aren’t any sudden ‘buffering’ moments during the study. Hopefully in the future we can develop something smarter than that but it’s going to be hard to get right without potentially damaging people’s timing.
At your end though you could speed things up by optimising your stimuli. For photographic images you can allow some image compression without any visible loss in quality and that makes images a lot smaller (for other forms of artwork I would still recommend a png file as you’ve used to avoid compression artefacts.
I opened your stimuli 21Pos2.png and 100Pos2.png using Gimp (free image manipulation software) and saved them as jpg files with quality=80%. The file sizes went 410kb to 67kb and 367kb to 33kb with no visible difference, so I believe with those settings would cut download time for your participants by something like 80%
Hi, thanks for the explanation here. I have a similar issue as arkadiy. In my case I am using a movie file, that is already compressed as much as possible. Downloading it takes a few minutes. Are there any new developments on this that? Would there be any way to play a movie that is hosted on youtube or somewhere?
Best,
Max
Hi @MNentwich, yes you should be able to programmatically arrange for select resources to load on demand as the experiment is in progress with the next PsychoPy release, which is set to come out in a few weeks. Please consult Alain’s demo for details on how that would work. Hope that helps some, x
Hi Max,
My Brookes Template has an embedded YouTube video using the same html as my demographics demo.
Thanks a lot wakecarter, this is really helpful!
I was able to implement playing a movie based on the template: Pavlovia
There are two things I would like to change:
<form style="padding-top: 1em; text-align: right;">
<input type="submit" value="Continue" />
</form>
However, when I do that the the experiment does not end automatically. What would be a proper way to disable the continue button and move to the next trial or end of the experiment on completion of the movie?
If anyone knows some ways to do this I would appreciate the help!
Best,
Max
I think I found a potential solution for 2. but am not sure how to implement it: iframe - Javascript code for disabling mouse click for youtube videos - Stack Overflow
<head>
[ STUFF ]
<style>
#[THE_ID_OF_YOUR_CONTAINER] {
pointer-events: none;
}
</style>
</head>
I am not sure what #[THE_ID_OF_YOUR_CONTAINER] would be?
Could that be set in the html file?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div onclick="event.preventDefault(); return false;" class="muse-video-player" data-video="zT4Vmcc" data-links="0" data-autoplay="1" data-width="576" data-style="no-controls"></div><script src="https://muse.ai/static/js/embed-player.min.js"></script>
</body>
</html>
Or does it need to come from the .js of the experiment?
You could try naming this container.
<div name="youtube" onclick="event.preventDefault(); return false;" class="muse-video-player" data-video="zT4Vmcc" data-links="0" data-autoplay="1" data-width="576" data-style="no-controls"></div><script src="https://muse.ai/static/js/embed-player.min.js"></script>
Thanks for the reply, I figured out that it could be set with
id="youtube"
However, the script I posted before wasn’t a solution. This one below actually suppresses all mouse- and key-presses:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
</head>
<body style="width: 840px; background-color: grey;">
<iframe src="https://muse.ai/embed/vUbi2PM?links=0&autoplay=1&style=no-controls" width="576" height="324" frameborder="0" allowfullscreen></iframe>
<style>
iframe {pointer-events: none!important;}
</style>
</body>
</html>
Also wanted to follow up on the continue button, when I remove it from your original template the study does not finish after the video is played. I don’t really understand how the button is linked in the .js of the experiment.
Is there any way to automatically go from the video to the end of the experiment or next trial?
This is the version of the experiment I have right now:
git@gitlab.pavlovia.org:mnentwich/muse_disable_everything.git
Is this the embedded html demo. Another way of ending the routine after, say, 60 seconds is in Each Frame
if t > 60:
continueRoutine = False
Currently there’s a continueRoutine = a variable which changes when the form in the embedded html is submitted.
Yes, It’s the embedded html form your Brookes Template.
Thanks for the suggestion, I managed to implement something like this:
function videoRoutineEachFrame(snapshot) {
return function () {
//------Loop for each frame of Routine 'video'-------
// get current time
t = videoClock.getTime();
frameN = frameN + 1;// number of completed frames (so 0 is the first frame)
...
if (frameN > 600) {
continueRoutine = false;
} else {
continueRoutine = continue_routine;
}
...
}
The experiment now ends (or advances to the next trial) after replay.
I am a little unsure about the timing though. The test video has a frame rate of 30fps and is 2s long. So, I was trying to end the routine after 60 frames, right after the last frame is displayed. However, the experiment then ends before the end of the movie.
Is this ‘frameN’ dependent on the refresh rate of the screen and not the frame rate of the video? If so, how would I know how many frames are played in an online experiment where I don’t know the screen of every participant?
The same seems to happen if I use time ‘t’ as a condition. It looked to me that ‘t’ is zero at the start of the video trial. However, stopping at the length of the video the experiment ends to early.
If your video is running in an embedded html file then I don’t think that the number of frames in Pavlovia bears any relationship to it.
I think that frameN increments automatically.
For using t you would need to add the time it takes to load and start the video. The only alternative would be to have a form automatically submit inside the embedded html when the video ends, though I’m not sure how to do this (or whether it is possible).
Thanks for the last comment on this! I set up experiments with local movie files in the meantime, but I wanted to get back to this, since my studies take longer to download files now.
I tried to set up some test version of a video experiment based on your code and tried to implement ending the routine after a set time: Sign in · GitLab
What happens is that the movie trial does indeed end after that time and the experiment goes to the next trial. The problem seems to be that the movie is not stopping and continues to be displayed on the last frame throughout the next trial.
@wakecarter you mentioned some ‘form’ in a previous post. Does this relate to the form you had in your template that chooses which part of the experiment to go to, or is this some concept from html/JS?
A solution for this is to put this in Each frame:
if ((t > 5)) {
$('iframe').each(function(index) {
$('#iframe-o').remove();
});
continueRoutine = false;
}
Implementing this suggestion:
And adding a jquery to end the movie. This is needed because I removed the ‘Continue’ button in the html.