Advice on JS for changing embedded HTML5 Video

Hey there,

So I’m working on a problem for a client who wants to have the ability to trigger some event off of the end of a video. In this case, I found some example code on CodePen where the creator had set up a JS trigger that when the video ended a new URL would be added to the video src.

Always in a script tag, I tried adding it as an on-page embed and in the head code for the CMS collection page (only one place at a time). Nothing I did work. Even though I copied it in the same, for some reason the script does not seem to trigger.

Ultimately I am trying to make a video course, and to do that I need to detect the end of a video as an event so that I can:

  1. Trigger a pop-up
  2. Move onto another video (possibly by triggering a different page link)

Does anyone know why or have any clue what I might do to achieve my goal, regardless if it uses this or another method?

Codepen example:

Here is my site Read-Only: LINK

hi @Maydris after pasting code from CodePen into embed all works as expected.

hey @Stan thanks for taking a look. I agree with you, I hadn’t tried on a normal page. I was trying to do this through a CMS page.

I have the video inside of the page’s rich-text element as a code embed tied to a CMS entry.

For some reason, done this way the code doesn’t seem to trigger. It seems to be something about the CMS page. I tried the same code you have there in a CMS page as an embed and it didn’t seem to trigger.

Any idea why?

Correction, I needed to remove the repeat script from the head tag, now the on page embed works on a CMS Page, but the one bound in the cms rich text element does not.

I had hoped to use the method of the rich-text embed to make it simple for the client to manage.

Live CMS page: html5 video player

I’ve resolved the issue.

It was the order of where the JS needed to go to trigger properly. Must be something I don’t understand about Javascript.

I was able to have the code run by putting it in the CMS page’s ‘Before tag’ section and only adding the HTML to the rich-text embed. It also worked by adding it as the HTML followed by the script as @Stan had written, adding it as the full embed in the rich text element.