Support Home Task Builder 2 Tutorials Tutorial: Triggering videos to start playing

Tutorial: Triggering videos to start playing


This tutorial shows you how to set up a few different ways of playing a video using different combinations of components. You can, of course, turn on the controls within the Video component and let the participant start/stop the video as much as they like with the in-built functionality. But, for situations where you don't want the controls to appear, there are ways that you can use the Object - Component system to your advantage to control the video.

In the first example shown in the video tutorial below, we can try to enable autoplay by using the Trigger - Active component and set it to activate at Screen Start. NB: some browsers restrict autoplay unless the user (in this case, the participant) has triggered it with a keyboard press or a mouse click, so there is no guarantee that this will work. It's usually safer to let the participant trigger the video to play themselves.

In the second example we can use the Click To Activate component directly on the Video, which does exactly what it says on the tin and activates (plays) the video once it's clicked.

In the third example we can place a Trigger - Active component on the video again, but this time set it to activate only when the response 'play' is received. In the Hotspot object, we've got a Hotspot component which makes an invisible area of the screen interactable, and we've added a Click Response which submits the response 'play' when clicked. This then activates the trigger that we set up on the video. There's also an Overlay component on the Hotspot object, which means we can tell the Hotspot to set its size and position relative to the Video object - this will ensure the Hotspot is the same size as the video regardless of what size of screen your participants are using. Anywhere they click on the video will be a part of the Hotspot, and anywhere they click outside of it won't be on the Hotspot.

In the fourth and final example, we've created a Play button which is a combination of an HTML Button component and another Click Response component as in the previous example, which submits a 'play' response when clicked on. Again, the Trigger - Active component in the Video object listens for the 'play' response, and then plays the video once that response is received.

Open in Gorilla