Youtube player

Introduction

Play youtube video on iframe.

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Enable dom element in configuration of game
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
    };
    var game = new Phaser.Game(config);
    
    • Set parent to divId
    • Set dom.createContainer to true.
  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexyoutubeplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexyoutubeplayerplugin.min.js', true);
    
  • Add youtube player object
    var youtubePlayer = scene.add.rexYoutubePlayer(x, y, width, height, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import YoutubePlayerPlugin from 'phaser3-rex-plugins/plugins/youtubeplayer-plugin.js';
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
        plugins: {
            global: [{
                key: 'rexYoutubePlayer',
                plugin: YoutubePlayerPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
    • Set parent to divId
    • Set dom.createContainer to true.
  • Add youtube player object
    var youtubePlayer = scene.add.rexYoutubePlayer(x, y, width, height, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Enable dom element in configuration of game
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
    };
    var game = new Phaser.Game(config);
    
    • Set parent to divId
    • Set dom.createContainer to true.
  • Import class
    import YoutubePlayer from 'phaser3-rex-plugins/plugins/youtubeplayer.js';
    
  • Add youtube player object
    var youtubePlayer = new YoutubePlayer(scene, x, y, width, height, config);
    sscene.add.existing(youtubePlayer);
    

Add youtube player object

  • Youtube player on DOM
    var player = scene.add.rexYoutubePlayer(x, y, width, height, config);
    // var player = scene.add.rexYoutubePlayer(x, y, config);
    // var player = scene.add.rexYoutubePlayer(config);
    

Default configuration

{
    x: 0,
    y: 0,
    width: undefined,
    height: undefined,

    videoId: '',
    autoPlay: true,
    controls: false,
    keyboardControl: true,
    modestBranding: false,
    loop: false,
}
  • x, y : Position
  • width, height : Size of element
  • videoId : The YouTube video ID that identifies the video that the player will load.
  • autoPlay : Automatically start to play when the player loads.
  • controls : Whether the video player controls are displayed.
  • keyboardControl : Set false to disable keyboard controls.
  • modestBranding : Set false to prevent the YouTube logo from displaying in the control bar.
  • loop : Play video when ended.

Custom class

  • Define class
    class MyYoutubePlayer extends YoutubePlayer {  // or YoutubePlayerCanvas
        constructor(scene, x, y, width, height, config) {
            super(scene, x, y, width, height, config) {
            // ...
            scene.add.existing(this);
        }
        // ...
    
        // preUpdate(time, delta) {
        //     super.preUpdate(time, delta)
        // }
    }
    
    • scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
      • If the Game Object renders, it will be added to the Display List.
      • If it has a preUpdate method, it will be added to the Update List.
  • Create instance
    var player = new MyYoutubePlayer(scene, x, y, width, height, config);
    

Load

player.load(videoId);
// player.load(videoId, autoPlay);

Play

player.play();

Pause

player.pause();

Playback time

  • Get
    var playbackTime = player.playbackTime; // time in seconds
    
    var t = player.t; // t: 0~1
    
  • Set
    player.setPlaybackTime(time); // time in seconds
    // player.playbackTime = time;
    
    player.setT(t); // t: 0~1
    // player.t = t;
    

Duration

var duration = player.duration;  // time in seconds

Volume

  • Get
    var volume = player.volume;  // volume: 0~1
    
  • Set
    player.setVolume(volume);  // volume: 0~1
    // player.volume = volume;
    

Mute

  • Get
    var muted = player.muted;  // muted: true/false
    
  • Set
    player.setMute(muted);  // muted: true/false
    // player.muted = muted;
    

Loop

  • Get
    var loop = player.loop;  // loop: true/false
    
  • Set
    player.setLoop(loop);  // loop: true/false
    // player.loop = loop;
    

Resize

player.resize(width, height);

Status

  • Is playing
    var isPlaying = player.isPlaying;
    
  • Is paused
    var isPaused = player.isPaused;
    
  • Has end
    var hasEnded = player.hasEnded;
    
  • Video state
    var videoState = player.videoState;
    
    or
    var videoStateString = player.videoStateString;
    
    • -1 : unstarted
    • 0 : ended
    • 1 : playing
    • 2 : paused
    • 3 : buffering
    • 5 : cued

Events

  • Youtube player api ready
    player.on('ready', function(player){ }, scope);
    
  • State change
    player.on('statechange', function(player){ }, scope);
    
    • State : player.videoState
  • Unstarted
    player.on('unstarted', function(player){ }, scope);
    
  • Playing
    player.on('playing', function(player){ }, scope);
    
  • Pause
    player.on('pause', function(player){ }, scope);
    
  • Ended
    player.on('ended', function(player){ }, scope);
    
  • Buffering
    player.on('buffering', function(player){ }, scope);
    
  • Video cued
    player.on('cued', function(player){ }, scope);
    
  • Error
    player.on('error', function(player, errorMessage){ }, scope);
    

No Playback time changed event

Get playback time every tick might cause playing video lagging.