Playing Videos

# Course Introduction

You can import and play your videos, or import videos that you'd like to share.

# YouTube-related Components

You can use a video as UI or place it in the world. YoutubeGUIPlayerComponent is used when a video is used as UI, and YoutubePlayerWorldComponent is used when placed in the world. Using it as UI will fix the video at a single location. It will stay at that position even if the user wanders around the map. Using it in the world will fix the video at a placed location, and will basically stay there even when the player moves around. [gif](1639617553145463b36f7117043408f8c0fea93f888fe)

> Tip Even if you set the video to be played immediately, it will be played when you test the game. 

#### YoutubePlayerWorldComponent Property

[{"Property":"ControllerScale","Explanation":"Sets the size of the buttons and the seek bar to control the video."},{"Property":"IgnoreMapLayerCheck","Explanation":"Activating it will disable the function to designate SortingLayer with the name shown in the map layer."},{"Property":"LocalScale","Explanation":"Sets the video size."},{"Property":"OrderInLayer","Explanation":"Aligns layer. You can set the order of entities within a layer."},{"Property":"ShowController","Explanation":"Shows UI to control video."},{"Property":"SortingLayer","Explanation":"SortingLayer will decide the display priority when 2 or more YoutubePlayers overlap."},{"Property":"Loop","Explanation":"Plays the video repeatedly."},{"Property":"PlayOnAwake","Explanation":"Activating it will auto-play the video upon entering the world."},{"Property":"Shuffle","Explanation":"Activating it will shuffle the playing sequence of videos."},{"Property":"Urls","Explanation":"Enter the URL of the video to play. Size: The input number will be how many video Urls you can enter."}]

#### YoutubePlayerGUIComponent Property

[{"Property":"Loop","Explanation":"Activating it will play the video repeatedly."},{"Property":"PlayOnAwake","Explanation":"Activating it will auto-play the video upon entering the world."},{"Property":"Shuffle","Explanation":"Activating it will shuffle the sequence of videos."},{"Property":"Urls","Explanation":"Enter the URL of the video to play. Size: The input number will be how many video Urls you can enter."}]

# Playing Video in the World

  1. Select [png](1634542479186400047df886b445e959cb1503f312508) Workspace - [png](1634598960433b8c2accd227347b29b0efb94f1320156) NativeModel - [png](16345998699992db91451454e4357a1a26f2fc8d94b61) YoutubePlayerWorld to place it.  
[png](1638869874178184b15bdee814320afc34e98cac68bdf)
  2. Enter 2 for Size, and enter the video Url. 
     * https://www.youtube.com/watch?v=hvzp4kOtaSw
     * https://youtu.be/3Kom6vz6nic
  3. Set the property value, then click [png](1635317657654c59c47ffc44d414db579b8d2fc0715a8) Start to check.  
[png](163886989504016bb3fe6c3374db3ae0875f29add252f)



# Playing Video with GUI

  1. Switch to [png](16345246682320aa0a7ca88a64b33b1bdeddb56363f63) UI Editor and select the [png](1634542426491c95a16f3ea3e4ffcb78909e4c6bbbd3d) YouTube model in Preset List to place it on the screen.  
[png](1639102697425418eca0a352b42ab89c28ba2ce5e2a15)
  2. Enter value of 2 for Size, and enter the video Url. 
     * https://youtu.be/3Kom6vz6nic
     * https://www.youtube.com/watch?v=hvzp4kOtaSw
  3. Set the property value, then click [png](1635317657654c59c47ffc44d414db579b8d2fc0715a8) Start to check.  
[png](1638871880838e765a1ff0c754da9b2396f95522c81c0)



# Function Use Example

Video will be played from 00:20 upon world entrance, and entering a specific key while playing will trigger a function. You can use YoutubePlayerWorldComponent and YoutubePlayerGUIComponent functions in the same way. The example will use YoutubePlayerWorldComponent. Example Url: https://www.youtube.com/watch?v=9pL_b1fl9LQ&t=1s

  1. Make a YoutubePlayerController script component, and add it to the placed YouTube model.  
[png](16391219258191430dbcee5304feb98a12e950231b349)
  2. Let's compose a script that will control the video when a certain key is entered. 
     * Video plays automatically from 00:20 upon world entrance
     * Pressing the P key stops the video
     * Pressing the L key stops the pauses and resumes the video
     * Pressing the 0 key jumps back to the start of the video



$$youtube /wKeMhEK2p8Q $$

> Learn more Because the execution control of all functions is configured using ClientOnly, not all users are seeing the same screen at a given time. If you'd like the users to see the same part of the video simultaneously, you need to synchronize.

#### Playing Video from a Certain Point

Set video's starting point as 00:20 and play from there.
    
    
    @Component
    script YoutubePlayerJumper extends Component
        @ExecSpace("ClientOnly")
        method void Jump(integer timeInSeconds, string userId)
        self.Entity.YoutubePlayerWorldComponent:Jump(20.0)
        end
    end
    

#### Press P to Stop Video
    
    
    @Component
    script YoutubePlayerPauser extends Component
        @ExecSpace("ClientOnly")
        method void Pause(string userId)
        self.Entity.YoutubePlayerWorldComponent:Pause()
        end
    end
    

#### Press 0 to Play from the Beginning
    
    
    @Component
    script YoutubePlayerStartPlayback extends Component
        @ExecSpace("ClientOnly")
        method void PlayFromStart()
        self.Entity.YoutubePlayerWorldComponent:Play()
          self.Entity.YoutubePlayerWorldComponent:Jump(0)
        end
    end
    

#### Press L to Pause and Resume Video
    
    
    @Component
    script YoutubePlayerControl extends Component
        @ExecSpace("ClientOnly")
        method void PlayPause(string userId)
        self.Entity.YoutubePlayerCommonComponent:PlayPause()
        end
    end
    

#### Utilizing KeyDownEvent

For a key input event, you need to utilize KeyDownEvent from EntityEventHandler as shown below. Write a function that will be executed upon key input in Event Handler.
    
    
    @Component
    script KeyPlaybackController extends Component
        @EventSender("Service", "InputService")
        handler HandleKeyDownEvent(KeyDownEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: InputService
        -- Space: Client
        ---------------------------------------------------------
    
        -- Parameters
        -- local key = event.key
        ---------------------------------------------------------
    
        local keyStr = tostring(key)
        if keyStr == "P" then
            self:Pause()
        elseif keyStr == "Alpha0" or keyStr == "Keypad0" then
            self:PlayFromStart()
        elseif keyStr == "L" then
            self:PlayPause()
        end
        end
    end
    

Composing script with each component will look like the followings.

  * Left: YoutubePlayerGUIComponent
  * Right: YoutubePlayerWorldComponent [png](1639051697502ac3f6036d2984b4098b7f24116e3a2eb)