Embed video continues to play

Using JavaScript with Hype
1

I have five different scenes with five small video clips, and each scene has four layouts (for smartphone, tablet, etc.). I embedded the videos from Vimeo (an example on one embed code below) using the HTML widget in Hype.

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/987778460?h=78fba7e612&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Checking Understanding"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

The video plays, but when I change scene, the video continues to play (that is, you can hear the sound from the video playing). I found this post on the forum: https://forums.tumult.com/t/silence-video-after-changing-scene/18859.

Unfortunately, I haven't been able to get the method it gives to work on my own project (that is, stopping or silencing the video).

I've given each video in each layout a unique element ID (video1, video2, video3, video4 for videos in the four layouts in scene 1) and added this .js code via the function button as suggested by the post. For example, for scene 1, layout 1 containing the video with unique element ID 'video1':


    var video = document.getElementById('video1');
    
    video1.pause();
    video1.currentTime = 0:

In the Inspector, under the Scene tab, under 'On Layout Unload', I selected 'Run JavaScript' and under function, selected the above .js code.

Can anyone suggest what I might be doing wrong?

2

There's a couple problems:

As an HTML Widget, this itself is an iframe. So you wouldn't be able to use code outside the iframe to control what is inside it.

This is for controlling the hype-native/html5 video element if you were to drag a video file onto the scene editor. So if you're using vimeo, this also won't work. If you can use regular video files, then this would be okay.

Otherwise, you might want to look at my post here, which shows how to stop vimeo videos:

Does that help?

3

Thanks for explaining. However, a couple of further questions.
How do I edit the Head HTML for the document? In your example, there is an extra tab 'Head HTML', in addition to the 'pauseAllVimeoVideos' function tab. It looks from that it's possible to edit the Head HTML inside Hype, is that the case? This post on the forum suggests it is https://forums.tumult.com/t/cant-edit-head-html/10771, but I can't find where.
Secondly, in your example the sole purpose of the button is to pause the video. However, I wanted the video to pause or be silent when moving to the next scene. The button would thus have a dual purpose - to move to the next scene and to pause the video. Could I use the Timeline actions '+' button to add the pause command?

4

In the Document Inspector (command-1), click "Edit Head HTML".

Yes, the javascript pauseAllVimeoVideos() function can be used in multiple contexts, such as a timeline action. However in this case, I'd probably use it on the "On Scene Unload" handler, found in the Scene Inspector (command-2).

5

Thank you. Your solution works a treat and the videos no longer continue to play.

1 Like