this solution works fine on mac OS but it seems not to work on iOS.
Or is it possibly a matter of “Reflect” ?
If you’re still hitting this issue, can you share your document?
Estimated: the actionscript to mute a video to load a different scene only works in firefox but not in Safari or Chrome, someone has a suggestion for this?
Can you share your document? This is a pretty standard HTML5 event that is posted above. This page has more info & references for the ‘ended’ event: http://stackoverflow.com/a/2741527
Hello!
I'm sorry if this question was answered already, I've been looking around the forum for a while now but I haven't been able to find what I need and I'm getting a little desperate.
I'm doing and interactive webpage, and I'm using some youtube videos for that. I managed to put a video and use this script:
var emptyInnerHTML = '';
hypeDocument.getElementById("video1").innerHTML = emptyInnerHTML
to stop the audio when the user changes pages or whatever other interaction they do. It worked with one video, but when I tried to do it with another, it didn't work. I've tried erasing the widget and putting a new one, I've tried copying the one that worked, I've changed the names to something short, but nothing seems to work.
Does anyone now what can I do to solve this? Thank you in advance!
You’ll need to use a different element ID for each video, and different JS functions for each video as well. You can name them video1, video2, etc. I’d also be happy to look at your document. (Click ‘message’ on my profile page here).
This thread might also help: Stop video when exiting an additional layout
Hello, thank you for your answer.
I named everything differently and I made different JS functions as well, and it actually worked for a while until I duplicated a scene. When I changed the ID for that duplicated scene, everything stopped working.
Although, the video does stop when I press the same button to open the video, when I clicked anything else, it doesn’t work.
I also have an additional question, when I exported it to html5, the html is small and all the information is in the .js files, is this normal or is there a way to get the complete html5? So it can be edited in DW or other tool like that.
Sorry for all the trouble, and thank you for your help!
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