Issue with Javascript running on the onVideoFinished function

Slinky82 · March 29, 2023, 2:46am

Hello,

I am banging my head against a wall trying to figure out why this file isn't working, so would love some advice from the Hive mind!

Essentially my Hype should work like this:

The first video autoplays. At the end of the video, the 'Question' scene loads automatically.
The 'Question' scene has four different buttons. The user can select any question button, and it will load the related 'answer' scene.
*On each 'answer' scene, a video will autoplay. At the end of the video, the 'Question' scene (should) loads again automatically.

Everything works perfectly, except for the 'answer' scene called '2.1.2 Business Personnel'. Even though it is built the same way as the other 'answer' scenes, it doesn't load the question scene on completion. The javascript is set to on scene load for each, uses the var playerIFrameID to find the video, and on the onVideoFinished function, the Questions scene will load.

I would love any advice anyone has. Please let me know if you have any questions!

Here is the Hype file: Test-QuestionVideos.zip

Daniel · March 29, 2023, 3:42pm

I received an error when running via Hype's preview that the froogaloop js file wasn't able to load. You may want to load via: vimeo-froogaloop2 CDN by jsDelivr - A CDN for npm and GitHub

This URL: https://f.vimeocdn.com/js/froogaloop2.min.js gives me the following error:

Sorry.

Blocked Unauthorized Access to the Resource

When I add that in using this code into the head:

<script src="https://cdn.jsdelivr.net/npm/vimeo-froogaloop2@0.1.1/javascript/froogaloop.min.js" integrity="sha256-8KfjjT2hD1DB9fTtTlDZIL1ugfZQp8LwXSAL36PUdCY=" crossorigin="anonymous"></script>

It works as expected and the faq loads at the end of that video -- let me know if that fixes it for you.

h_classen · March 29, 2023, 8:19pm

Vimeo's Froogaloop API was deprecated some years ago ... this may be worth to take into account too

vimeo has added migration help for the up to date js-library:

github.com

vimeo/player.js/blob/80c7e830f6d575d9c429dbbe062a6d3765f71ce2/docs/migrate-from-froogaloop.md

# Migrating from Froogaloop

Follow these steps to update your code from Froogaloop.

## Step 1: Modify the embed code

The first step in the migration is to remove the `api` and `player_id` query
parameters from the embed code. Query parameters are no longer required to
enable the Player JS API. You can leave the `player_id` if you wish, but we
encourage you to use the player object itself to keep track of multiple players.

## Step 2: Update the constructors

The parameters passed to the constructor haven’t changed, so the only thing
you’ll need to do is update the name:

```js
var froogaloop = $f(iframe);
```

This file has been truncated. show original

Slinky82 · March 30, 2023, 2:50am

Thanks Daniel! This didn't make a difference for me, unfortunately - the questions still don't load at the end of that video

Slinky82 · March 30, 2023, 2:52am

Thanks so much for replying! This is, unfortunately, a bit beyond my expertise. I'm not quite sure what to do with it? I'm a designer, not a developer, by trade. Trying to learn, but it's a slow path! Any pointers you could give I would really appreciate.

Slinky82 · March 30, 2023, 3:48am

Hello! I solved my problem. I was calling the javascript in two places... on the button in the timeline (for all but the last button) and on scene load for the videos. I added it to the last button and removed it from the scene load and it worked perfectly.