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:
- Trigger a pop-up
- 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: https://codepen.io/Girish2500/pen/YzzVoym
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.
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.