Embedding a YouTube Video into your Tumult Hype Document
It's easy to embed a hosted video from a site like Youtube or Vimeo:
Here's how to embed a Youtube video:
- Go to the Youtube video page
- Click the Share button below the video
- Click the Embed button that appears. Adjust the size to match the size you wish to embed.
- Copy and paste the iframe code in the text field
- In Hype, select Insert > Rectangle. (You may want to adjust the color of the new rectangle to match your design at this point)
- Select Edit > Edit Inner HTML to edit the Source of the element
- Insert your copied code (example shown below)
<iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/aIVeEuRBCFE?html5-1&rel=0" width="420"></iframe>
Tip: Use the following query string at the end of Youtube videos to resolve issues with embedding in iOS web views, and some browsers: ?html5-1&rel=0.
Tip #2: Use this webpage to create advanced embed codes for your Youtube Video.
If you are not able to enter full screen, simply embed your Youtube URL within the inner HTML of a rectangle and use the following format:
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXX?rel=0;" frameborder="0" allowfullscreen=""></iframe>
Embedding a Vimeo Video in your Tumult Hype Document
The workflow for embedding a Vimeo video is slightly different.
- On the video's page, click the 'Share' button.
- In the 'Embed' area of the overlay that appears, copy the <iframe... code.
- In Tumult Hype, add rectangle to your scene.
- Click Edit > Edit Inner HTML and paste the code you copied in step 2.
- Resize the rectangle to accommodate the size of your video.
Note: Videos may not work when you are previewing your Tumult Hype document. This is because the video URLs being pasted do not include the full protocol and URL of the video. For example, you may see src='//vimeo.com....'
as the URL. Change that to src='https://vimeo.com....'
to get your preview in Tumult Hype working correctly.
You may want to defer loading of your vimeo embed to speed up page loads. See this post for more info: Lazy Loading iframes - #4 by Pathfinder (Add data-vimeo-defer
to your iframe
code)
Embed an externally-hosted video (not a Hype video element)
Use this method if you would prefer to handle all the code yourself, or if you have a video file hosted elsewhere that you'd like to use:
First, drag your video files to your Resource library by dragging and dropping. Using this method, you also can optionally include the 'poster' attribute which shows a frame of your video or thumbnail prior to playback. If you don't have a poster image, that section of the code below can safely be deleted.
Next, create a regular rectangle, and select Edit > Edit Inner HTML. Modify the code below to match your video filenames, and paste it within your rectangle:
<video poster="${resourcesFolderName}/posterimage.png" width="640" height="360" preload="auto" controls>
<source src="${resourcesFolderName}/videofile.m4v" type="video/mp4" />
<source src="${resourcesFolderName}/videofile.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="${resourcesFolderName}videofile.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
You may want to remove the background color of your rectangle, and remove the default styling (like the border) to make your video more seamless. If your mp4/webm/ogv files are hosted elsewhere, just replace the code with "..." with the full url of your video files.
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:
- Select your HTML widget.
- 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
- In the On Scene Unload section of the Scene Inspector, add a Run JavaScript action.
- 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.
Example: StopVideo.zip (43.7 KB)
Loading Multiple Videos into a single video
element
To create a single video element within which you can load different videos, follow these steps:
Create a regular rectangle, and select Edit > Edit Inner HTML.
<video height="100%" width="100%" controls="">
<source src="" type="video/mp4">
</video>
Give the rectangle a unique ID, like hype_video
Add buttons or image thumbnails to the scene that will represent each film you want to play.
Give each button or thumbnail a unique ID.
Each button/thumbnail now needs to call a Javascript function that will load the respective video when clicked. We can use a single JS function for each button.
The function will use the Rectangle's element ID to find it and query it for its inner video element.
We then use the calling button's ID in a Switch clause to determine which video to load into the video element. We do this by setting the src Attribute.
Link a button to the following script (or check out the example below to skip ahead):
var hype_video = hypeDocument.getElementById('hype_video').querySelector("video");
switch (element.id) {
case "MrMrs":
hype_video.setAttribute('src', "./Videos/MR_AND_MRS_SMITH.mp4");
hype_video.play()
break;
case "ALIEN":
hype_video.setAttribute('src', "./Videos/ALIEN.mp4");
hype_video.play()
break;
}
Notice that we use paths for each video that point to an external file. These files are up one level from where the Tumult Hype document is exported to, and in a 'Videos' folder. Alternatively, you can drag videos into your resource library and use the normal ${resourcesFolderName}
path:
"${resourcesFolderName}/ALIEN.mp4"
You can also use other clauses instead of a switch, like
if (element.id == "ALIEN"){
//-- code block
} else if (element.id == "MrMrs" ) {
//-- code block
}
Example:
vidLoad.hype 2.zip (174.9 KB) (Example from @MarkHunte)
Creating Custom Play / Pause Buttons
Please see this thread: