Beginner Tutorial


Adding Player Controls to a Video Streaming from Amazon S3


15 minutes

Posted on: June 20, 2019

Learn Sumerian
Adding Player Controls to a Video Streaming from Amazon S3

Tags

s3
video
streaming
player controls
pause
rewind

In this tutorial you will learn about:

scripting
streaming video hosted in S3

This tutorial is a continuation of the Streaming Video from Amazon S3 tutorial where you learned how to stream a video from Amazon S3 inside an Amazon Sumerian scene. In this tutorial, you will learn how to add player controls (play, pause, and rewind) to a video streaming from Amazon S3 using scripts and the Script component.

You’ll learn about:

  • Streaming video via the Script component
  • Adding player controls

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Step 1: Set Up the Scene

In this step we will use the scene you created from the Streaming Video from Amazon S3 tutorial and set up our scene with some additional entities. These will include the player control icons and some empty entities that will eventually contain some manager scripts.

  1. Open the scene you created in the Streaming Video from Amazon S3 tutorial.

  2. In the Entities panel, choose the Quad entity. Navigate to the Inspector panel and rename the entity “Video Quad”.

  3. From the Create entity menu, add another Quad entity.

  4. With the new Quad selected, rename it “UI Pause Button”.

  5. Repeat steps 3 and 4 to add two more Quad entities but rename one new Quad entity “UI Play Button”, and name the second Quad entity “UI Rewind Button”. You should now have three button entities in your Entities panel.

  6. From the Create entity menu, add an empty Entity. This will be a container entity to hold two other empty entities, each with a script attached to it. We will cover sripts in the next step.

  7. Rename the new Entity to “Managers”.

  8. Repeat steps 6 and 7 to add two more empty entities. Rename one Entity “Interaction Handler - Controls” and the second Entity “Interaction Manager”. You should now have three empty entities in your Entities panel.

  9. Drag and drop both Interaction entities onto the Managers entity. This will nest these two entities, as child entities, under the Managers parent entity.

Step 2: Add Textures and Reposition the Player Control Icons

In this step, we add textures to the UI Buttons to make them look like player control buttons. We also reposition them to sit under the Video Quad, which displays the video. To complete this step, you must download the player control icon assets.

  1. With the UI Pause Button selected, expand the Material component.

  2. Expand the Color (Diffuse) property. Upload the pause.png file you downloaded by dragging and dropping the file onto the Color (Diffuse) property, or by choosing the folder icon and uploading the file.

  3. Repeat steps 1 and 2 for the UI Play Button entity and the UI Rewind Button entity. Use their respective files/images that you downloaded.

    With all the textures added, we will now reposition the buttons to be under the Video Quad.

  4. Choose the UI Pause Button, expand the Transform component, and then match the values to those shown below.

  5. Choose the UI Play Button, expand the Transform component, and then match the values to those shown below.

  6. Choose the UI Rewind Button, expand the Transform component, and then match the values to those shown below.