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.
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();
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?
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
1 Like
Hello Daniel,
Thank you. I will try it.
Here there. I need to remove the play button and the timeline bar in an externally-hosted video. Is this possible?
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
Got it working. I just removed “controls” in you code above. Missed it 
Thanks!
1 Like
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!
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 
1 Like
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
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" />
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:
1 Like
Thank you both! I appreciate this forum so much.
@MaxZieb, how would I replace the poster image with . . . ${resourcesFolderName}/img_workspaces.png
You would edit the code in the Inner HTML of the example
Tried that, but the Javascript seems to overwrite what I insert. 
You need to overwrite the poster attribute. Not the style attribute.
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
This is what I see at GitHub:
And when I replace what's there as indicated:
It gets overwritten every time.
I updated the code and download above to use data attributes…