Embedding media in a Pavlovia Survey
There are two basic methods of playing media (sounds and videos) in a Browser.
- Download and play locally
- Stream (so you can start playing before the whole file has been downloaded).
The larger the file, the better option 2 is compared with option 1.
In both cases the media file needs to be hosted somewhere.
For option 1, the easiest place to host your media files in on Gitlab. For example, I have a PsychoPy experiment called Stressful Stroop which plays a buzzer sound if you make a mistake. The run link for the experiment is https://run.pavlovia.org/Wake/stressful-stroop/ and the buzzer sound is BUZZER.mp3 so the URL for the buzzer is https://run.pavlovia.org/Wake/stressful-stroop/BUZZER.mp3.
I can add this to a Pavlovia Survey using the following code for mp3 and wav files:
<audio controls>
<source src="https://run.pavlovia.org/Wake/stressful-stroop/BUZZER.mp3" type="audio/mp3">
</audio>
Parameters for the audio tag are autoplay, controls, loop, muted, preload and src. Autoplay will not work on the first page.
Similarly, for videos you can use the video tag for mp4 and webm files.
For larger file, I would recommend hosting on Google Drive so they can be streamed in an iframe. Here are my slides on how to do this in Qualtrics, which will also work in Pavlovia Surveys.
Share outside your domain.
Copy link
Identify the unique Google Drive code for the media.
That code appears as xxx in the following html.
<iframe src="https://drive.google.com/file/d/xxx/preview" width="640" height="480"></iframe>
Edit the width and height as appropriate.
You can also try with iframe embed codes from other platforms. For Vimeo, videos can be set to autoplay and the code is
<iframe src="https://player.vimeo.com/video/486333942?autoplay=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
As a final note, one way of having an audio file is to make the size of a video too small to see.