Custom Video Embedding: Youtube, Vimeo, or hosted video files | Stopping Audio when exiting the scene

progfloyd · September 22, 2016, 11:05am

Hello,

If I have the video on the timeline,
How can I stop it when I exit the timeline?
and replay it when I get into the timeline.

Thank you.

jonathan · September 26, 2016, 5:06pm

Timelines can be thought of more as “streams of animations” than something to enter/exit. If you need to play or pause a video at an arbitrary point, this could be done with Timeline Actions and a little bit of JavaScript. You’d first need to assign a Unique Element ID for the video element via the identity inspector. Then you could have this code for a ‘Run JavaScript…’ action to pause:

hypeDocument.getElementById("myVideoID").pause();

And the corresponding code to play:

hypeDocument.getElementById("myVideoID").play();

progfloyd · September 27, 2016, 4:07am

Hello jonathan,

Thank you very much.
If my videos are embedded from youtube or vimeo, this JavaScript will do nothing.
How can I do for the embedded video with timeline?

Daniel · September 27, 2016, 2:27pm

A good helper library for playing and pausing Youtube using their API (without having to deal with their API) is this: http://mediaelementjs.com/examples/?name=youtube

You can run ‘pause’ or ‘play’ events against this player: http://mediaelementjs.com/#api

progfloyd · September 28, 2016, 3:12am

Hello Daniel,

Thank you. I will try it.

Rasmus · February 17, 2020, 1:48pm

Here there. I need to remove the play button and the timeline bar in an externally-hosted video. Is this possible?

Daniel · February 17, 2020, 2:53pm

If it is externally hosted, you would need to adjust the video embed code. Can you share a demo doc? For youtube, you would adjust this property: https://www.allowfullscreen.com/youtube

Rasmus · February 17, 2020, 3:21pm

Got it working. I just removed “controls” in you code above. Missed it

Thanks!

ajung · December 23, 2020, 12:44pm

Hi,
I'm currently making a kind of google street view for my school building (here's the page in progress: digitalerrundgang.rsp-bleialf.de)) and in every room there should play an embedded YouTube Video for a subject. Of course I want the video/audio to stop after "leaving" a room. As Daniel posted here there is a script that "empties" the widget after leaving the scene. The problem is that I only have one scene and every arrows is linked to a certain point in the timeline.
My question from someone who has nearly no clue of javascript: Can I pause the embedded audio/video after "leaving" the room/jumping to another point in the timeline or do I have spread every room/floor on different scenes to realize that?

Thanks!

jonathan · December 25, 2020, 11:18pm

Setting the innerHTML to be empty when leaving a scene works well because Hype will rebuild the innerHTML when reloading the scene anyways.

So you can use the technique of emptying the innerHTML of the element to stop the video, but you will need to set the innerHTML to your desired video when going back to the point in which it should be displayed.

It would probably just be adding the youtube embed code to an element with a specified ID, like:

hypeDocument.getElementById("myBoxID").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/0-4R2BEGeTo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

P.S. Very cool document! Reminds me of an old HyperStudio game I made as a kid where the point was to escape from school without getting caught

joezeffdesign · June 2, 2021, 3:38pm

Hi all,

Is there a quick and easy way to replace the YouTube-provided poster image with an image from your Resources Library when embedding a video using YouTube's provided embed code?

Thanks!
Joe

Daniel · June 2, 2021, 3:41pm

has a good answer, but would need to be within an HTML widget since it requires inline JavaScript.

You would replace

<img src="my_thumbnail.png" style="cursor:pointer" />

with

<img src="${resourcesFolderName}/imageinresourceslibrary.png" style="cursor:pointer" />

MaxZieb · June 2, 2021, 3:50pm

For YouTube you can give this a try (using Hype Data Decorator):
LiteYouTubeEmbedForHypeWithCustomPoster.hype.zip (230,7 KB)

This version is modified to use data attributes for
data-yt-poster (optional) and data-yt-videoid (required)

Based on:

joezeffdesign · June 2, 2021, 4:16pm

Thank you both! I appreciate this forum so much.

@MaxZieb, how would I replace the poster image with . . . ${resourcesFolderName}/img_workspaces.png

Daniel · June 2, 2021, 4:21pm

You would edit the code in the Inner HTML of the example

joezeffdesign · June 2, 2021, 4:27pm

Tried that, but the Javascript seems to overwrite what I insert.

MaxZieb · June 2, 2021, 4:28pm

You need to overwrite the poster attribute. Not the style attribute.

joezeffdesign · June 2, 2021, 4:35pm

Sorry to be so stupid

I was trying to modify the URL here:

Sounds like that's not where I do it. So where do I insert my URL if not here?

THANKS

joezeffdesign · June 2, 2021, 4:40pm

This is what I see at GitHub:

And when I replace what's there as indicated:

It gets overwritten every time.

MaxZieb · June 2, 2021, 5:04pm

I updated the code and download above to use data attributes…