Stopping embedded video — and then restarting

Using JavaScript with Hype
1

I found this instruction to be very helpful, and works like a charm . . .

Stopping Audio within an HTML Widget

Audio playing in an HTML widget (in the form of embedded video or audio) will continue playing once your users have left the scene. To stop any audio playing from an HTML widget when leaving the scene, you’ll need to add a small snippet of JavaScript to trigger ‘On Scene Unload.’ Here’s the workflow for implementing this:

  1. Select your HTML widget.
  2. Open the ‘Identity Inspector’ and fill in a value for the Unique Element ID. This ID will allow us to directly target the HTML widget. In this example, we’ll be using the ID video1
  3. In the On Scene Unload section of the Scene Inspector, add a Run JavaScript action.
  4. Add the following code:
var emptyInnerHTML = '';
hypeDocument.getElementById("video1").innerHTML = emptyInnerHTML

Note : Audio playing within a standard audio or video element will stop when exiting the scene. Visit the Audio & Video documentation for more information.

. . . but is there a Javascript function to refill the InnerHTML?

I've placed embed code for a YouTube video in an HTML widget.
The widget is set to 0 percent scale and 0 percent visibility when the scene loads.
When the user clicks a play button, the widget animates to 100 percent scale and 100 percent visibility.
When the user clicks a close button, the widget animates back to 0 percent scale and 0 percent visibility. Emptying the innerHTML makes the audio stop.
Good.

But if the user clicks the play button again, the widget reanimates with an emptyHTML. How do I refill it with the original content if I do all this within the same scene?

Thanks!
Joe

2

You can rewrite the contents of an iframe with JS function like this:

var newinnerContent = '<iframe id="frame2" src="https://example.com" style="border:none;overflow:hidden;width:596px; height: 149px" ></iframe>';

document.getElementById("frame1").innerHTML = newinnerContent

You would need to put this inside of a regular rectangle, not an HTML widget. So the element with the id of 'frame2' in the example above would be a rect. There's lots of ways to do this but I think the method above is the simplest. Make sure you enclose your code above with ' and you can then use " internally to setup the properties of the iframe.

3

Lemme see if I have this right.
(Which I don't, of course, because I'm a dunce)

I made a new rectangle to replace my HTML widget.
I clicked on the pencil and attached this code to the rectangle:

var newinnerContent = '<iframe id="frame2" src="https://www.youtube.com/embed/NCAhK5b5UV4" style="border:none;overflow:hidden;width:596px; height: 149px" frameborder="0" scrolling="no" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>';

document.getElementById("frame1").innerHTML = newinnerContent

. . . which yields this unsightly scene . . .

Screen Shot 2021-03-03 at 2.56.50 PM
Screen Shot 2021-03-03 at 2.56.50 PM1960×1290 192 KB

. . . and I'm not clear what Javascript function I should call to close it.

Oy vey.

4

It looks like you just need to put it in a <script> ... </script> tag, or use an action handler to run javascript.

5

That function needs to be added as a JS function in Hype:

Screen Shot 2021-03-03 at 3.17.51 PM
Screen Shot 2021-03-03 at 3.17.51 PM1476×698 70.6 KB

The button just runs that function: frame-js.hype.zip (12.7 KB)

The function can be under any name, just as long as it runs your code, which sets the Inner HTML of the frame.

6

Ahhhh!

It worked :slight_smile: (file attached to help others like me)

frametest2.zip (298.0 KB)

Thanks!
Joe

3 Likes
7

Just used this tip for a project. Thanks for the HYPE file :slight_smile:

1 Like