Trigger a timeline after playing Youtube Video

Using JavaScript with Hype
,
1

Hello everyone,

It seems like a simple process, but I cannot get it.
I am trying to trigger a timeline after I play a youtube movie.
I have searched for answers at it seems like javascript is the answer, but cannot get the full answer.
I’ve tried something like the following, but nothing worked.

var playerIFrameID = “vimeoIFrame”;

function onVideoFinished() {

hypeDocument.starttimelineNamed("video1", hypeDocument.kDirectionForward);
2

Hi @kasou227

You need to add a listener for the end of the video and then put your code inside that to call the action. Putting this code in your on scene load function you can manipulate a video.

var video = hypeDocument.getElementById("YOUR VIDEO ID"); // this is the id you gave the video / player

video.addEventListener('ended', function () {
    // action you want to happen at the end of the video
});

There are many posts here on how to manipulate a youtube video. Have a look again. If your video is in an iframe then you need to add this code within a script tag inside the iframe making sure you’ve added an ID to your video player. Instead of using “hypeDocument” use “document.getElementByID”

BTW your start timeline code is not correct. it should be “startTimelineNamed(…” notice the camel case (capital letters)

1 Like
3

I’ve added the following javascript on scene load,

var video = document.getElementById(“SupportCommunity”);
video.addEventListener(‘ended’, function () {
hypeDocument.startTimelineNamed(“video1”, hypeDocument.kDirectionForward);
});

is this correct? It does not work, I am trying to start the “video1” timeline as the video ends.
Would this be possible for the timeline to appear after 15 seconds has passed, when watching the video? I have uploaded the page I am creating.

youtube_example.hype.zip (1.9 MB)

4

Hi @DBear - I’m trying to make your example work but it’s not working for me for some reason.

I’m placing this inside of an HTML element:

<iframe width="560" height="315" src="https://www.youtube.com/embed/1lo8EomDrwA" frameborder="0" id="repVid" allowfullscreen>

<script type="text/javascript">
var video = document.getElementById("repVid"); // this is the id you gave the video / player

video.addEventListener('ended', function () {
    // action you want to happen at the end of the video
    
    hypeDocument.getElementById('next1a').style.display="block";
    
});

</script>

</iframe>

Do I have something wrong?

Thank you!
Matt

5

You’re going to need to use the Youtube API to listen to those types of events. Youtube doesn’t generate a standard HTML5 video, and when a video is within an iframe it is insulated inside its own window, so you have two things here that are blocking from detection of an ended video. Check out this thread for how to work with the Youtube API within a regular rectangle.

Using their API, you can detect whether a video has ‘ended’: https://developers.google.com/youtube/iframe_api_reference#Playback_status

2 Likes
6

I was just playing with this and updating an old example ( the one @Daniel points to ) and to show you the API he also mentions

You WILL need to read through the API doc to understand whats is what but that should not be to hard to follow if you read ALL of it. will not take you long and it should give you a great way from what I can see to play your video list which I demo in the new example which I just put together as a quick example code wise.

One thing to note I did get an occasional load error but that could be for any number of reasons. I found it did not happen as much if I loaded the JS from the timeline a second or so into the main timeline. So it may be because I am loading in preview!

The example has three videos that load at the end of play. To see that without waiting just scrub the playhead to near the end of each.

Youtube video player_v2.hype.zip (14.0 KB)

1 Like
7

Nothing to add here as the guys have explained it well. Accept, my apologies to the original poster as I seemed to have given advice that isn’t related to a YouTube video but a HTML video. Also just to re-iterate what Daniel has said. Using a HTML widget in Hype creates an Iframe and then subsequently embedding a YouTube video inside that iFrame (essentially an iFrame in an iFrame) is asking for trouble.

The YouTube API in a rectangle element is the way to go.

1 Like