class: VideoBaseTexture

---

A texture of a [playing] Video.

Video base textures mimic Pixi BaseTexture.from.... method in their creation process.

This can be used in several ways, such as:

let texture = PIXI.VideoBaseTexture.fromUrl('http://mydomain.com/video.mp4');

let texture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://mydomain.com/video.mp4', mime: 'video/mp4' });

let texture = PIXI.VideoBaseTexture.fromUrls(['/video.webm', '/video.mp4']);

let texture = PIXI.VideoBaseTexture.fromUrls([
    { src: '/video.webm', mime: 'video/webm' },
    { src: '/video.mp4', mime: 'video/mp4' }
]);

See the "deus" demo.

Extends:

EventEmitter → BaseTexture → VideoBaseTexture

Methods summary

---

Public methods
private	_isSourcePlaying(): boolean
private	_isSourceReady(): boolean
private	_onPlayStart(): void
private	_onPlayStop(): void
private	_onCanPlay(): void
public	destroy(): void
public static	fromVideo(video: HTMLVideoElement, scaleMode: number): PIXI.VideoBaseTexture
public static	fromUrl(videoSrc: string, object, Array.<string>, Array.<object>, scaleMode: number): PIXI.VideoBaseTexture
public	autoUpdate(): void
private	_isSourcePlaying(): boolean
private	_isSourceReady(): boolean
private	_onPlayStart(): void
private	_onPlayStop(): void
private	_onCanPlay(): void
public	destroy(): void
public static	fromVideo(video: HTMLVideoElement, scaleMode: number): PIXI.VideoBaseTexture
public static	fromUrl(videoSrc: string, object, Array.<string>, Array.<object>, scaleMode: number): PIXI.VideoBaseTexture
public	autoUpdate(): void
public	update(): void
public	_updateDimensions(): void
protected	loadSource(source: HTMLImageElement, HTMLCanvasElement): void
public	_updateImageType(): void
public	_loadSvgSource(): void
public	_loadSvgSourceUsingDataUri(dataUri: string): void
public	_loadSvgSourceUsingXhr(): void
public	_loadSvgSourceUsingString(svgString: string): void
private	_sourceLoaded(): void
public	dispose(): void
public	updateSourceImage(newSrc: string): void

Properties

---

Name	Type	Attribute	Description
autoPlay	boolean	public	When set to true will automatically play videos used by this texture once they are loaded. If false, it will not modify the playing state.
autoPlay	boolean	public	When set to true will automatically play videos used by this texture once they are loaded. If false, it will not modify the playing state.
resolution	number	public	The resolution / device pixel ratio of the texture
width	number	public	The width of the base texture set when the image has loaded
height	number	public	The height of the base texture set when the image has loaded
realWidth	number	public	Used to store the actual width of the source of this texture
realHeight	number	public	Used to store the actual height of the source of this texture
scaleMode	number	public	The scale mode to apply when scaling this texture
hasLoaded	boolean	public	Set to true once the base texture has successfully loaded. This is never true if the underlying source fails to load or has no texture data.
isLoading	boolean	public	Set to true if the source is currently loading. If an Image source is loading the 'loaded' or 'error' event will be dispatched when the operation ends. An underyling source that is immediately-available bypasses loading entirely.
source	HTMLImageElement HTMLCanvasElement	public	The image source that is used to create the texture. TODO: Make this a setter that calls loadSource();
origSource	Image	public	The image source that is used to create the texture. This is used to store the original Svg source when it is replaced with a canvas element. TODO: Currently not in use but could be used when re-scaling svg.
imageType	string	public	Type of image defined in source, eg. png or svg
sourceScale	number	public	Scale for source image. Used with Svg images to scale them before rasterization.
premultipliedAlpha	boolean	public	Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) All blend modes, and shaders written for default value. Change it on your own risk.
imageUrl	string	public	The image url of the texture
isPowerOfTwo	boolean	private	Whether or not the texture is a power of two, try to use power of two textures as much as you can
mipmap	boolean	public	Set this to true if a mipmap of this texture needs to be generated. This value needs to be set before the texture is used Also the texture must be a power of two size to work
wrapMode	number	public	WebGL Texture wrap mode
_glTextures	object.<number, WebGLTexture>	private	A map of renderer IDs to webgl textures
_destroyed	boolean	private	If the object has been destroyed via destroy(). If true, it should not be used.
loaded		protected	Fired when a not-immediately-available source finishes loading.
error		protected	Fired when a not-immediately-available source fails to load.

Methods

---

_isSourcePlaying(): boolean

Returns true if the underlying source is playing.

Returns:

boolean

_isSourceReady(): boolean

Returns true if the underlying source is ready for playing.

Returns:

boolean

_onPlayStart(): void

Runs the update loop when the video is ready to play

Returns:

void

_onPlayStop(): void

Fired when a pause event is triggered, stops the update loop

Returns:

void

_onCanPlay(): void

Fired when the video is loaded and ready to play

Returns:

void

destroy(): void

Destroys this texture

Returns:

void

fromVideo(video: HTMLVideoElement, scaleMode: number): PIXI.VideoBaseTexture

Mimic Pixi BaseTexture.from.... method.

Params:

Name	Type	Attribute	Description
video			Video to create texture from
scaleMode			See {@link PIXI.SCALE_MODES} for possible values

Returns:

PIXI.VideoBaseTexture

fromUrl(videoSrc: string, object, Array.<string>, Array.<object>, scaleMode: number): PIXI.VideoBaseTexture

Helper function that creates a new BaseTexture based on the given video element.
This BaseTexture can then be used to create a texture

Params:

Name	Type	Attribute	Description
videoSrc			The URL(s) for the video.
videoSrc.src			One of the source urls for the video
videoSrc.mime			The mimetype of the video (e.g. 'video/mp4'). If not specified the url's extension will be used as the second part of the mime type.
scaleMode			See {@link PIXI.SCALE_MODES} for possible values

Returns:

PIXI.VideoBaseTexture

autoUpdate(): void

Should the base texture automatically update itself, set to true by default

Returns:

void

_isSourcePlaying(): boolean

Returns true if the underlying source is playing.

Returns:

boolean

_isSourceReady(): boolean

Returns true if the underlying source is ready for playing.

Returns:

boolean

_onPlayStart(): void

Runs the update loop when the video is ready to play

Returns:

void

_onPlayStop(): void

Fired when a pause event is triggered, stops the update loop

Returns:

void

_onCanPlay(): void

Fired when the video is loaded and ready to play

Returns:

void

destroy(): void

Destroys this texture

Returns:

void

fromVideo(video: HTMLVideoElement, scaleMode: number): PIXI.VideoBaseTexture

Mimic Pixi BaseTexture.from.... method.

Params:

Name	Type	Attribute	Description
video			Video to create texture from
scaleMode			See {@link PIXI.SCALE_MODES} for possible values

Returns:

PIXI.VideoBaseTexture

fromUrl(videoSrc: string, object, Array.<string>, Array.<object>, scaleMode: number): PIXI.VideoBaseTexture

Helper function that creates a new BaseTexture based on the given video element.
This BaseTexture can then be used to create a texture

Params:

Name	Type	Attribute	Description
videoSrc			The URL(s) for the video.
videoSrc.src			One of the source urls for the video
videoSrc.mime			The mimetype of the video (e.g. 'video/mp4'). If not specified the url's extension will be used as the second part of the mime type.
scaleMode			See {@link PIXI.SCALE_MODES} for possible values

Returns:

PIXI.VideoBaseTexture

autoUpdate(): void

Should the base texture automatically update itself, set to true by default

Returns:

void

update(): void

Updates the texture on all the webgl renderers, this also assumes the src has changed.

Returns:

void

_updateDimensions(): void

Update dimensions from real values

Returns:

void

loadSource(source: HTMLImageElement, HTMLCanvasElement): void

Load a source.

If the source is not-immediately-available, such as an image that needs to be
downloaded, then the 'loaded' or 'error' event will be dispatched in the future
and hasLoaded will remain false after this call.

The logic state after calling loadSource directly or indirectly (eg. fromImage, new BaseTexture) is:

if (texture.hasLoaded) {
   // texture ready for use
} else if (texture.isLoading) {
   // listen to 'loaded' and/or 'error' events on texture
} else {
   // not loading, not going to load UNLESS the source is reloaded
   // (it may still make sense to listen to the events)
}

Params:

Name	Type	Attribute	Description
source			the source object of the texture.

Returns:

void

_updateImageType(): void

Updates type of the source image.

Returns:

void

_loadSvgSource(): void

Checks if source is an SVG image and whether it's loaded via a URL or a data URI. Then calls
_loadSvgSourceUsingDataUri or _loadSvgSourceUsingXhr.

Returns:

void

_loadSvgSourceUsingDataUri(dataUri: string): void

Reads an SVG string from data URI and then calls _loadSvgSourceUsingString.

Params:

Name	Type	Attribute	Description
dataUri			The data uri to load from.

Returns:

void

_loadSvgSourceUsingXhr(): void

Loads an SVG string from imageUrl using XHR and then calls _loadSvgSourceUsingString.

Returns:

void

_loadSvgSourceUsingString(svgString: string): void

Loads texture using an SVG string. The original SVG Image is stored as origSource and the
created canvas is the new source. The SVG is scaled using sourceScale. Called by
_loadSvgSourceUsingXhr or _loadSvgSourceUsingDataUri.

Params:

Name	Type	Attribute	Description
svgString			SVG source as string

Returns:

void

_sourceLoaded(): void

Used internally to update the width, height, and some other tracking vars once
a source has successfully loaded.

Returns:

void

dispose(): void

Frees the texture from WebGL memory without destroying this texture object.
This means you can still use the texture later which will upload it to GPU
memory again.

Returns:

void

updateSourceImage(newSrc: string): void

Changes the source image of the texture.
The original source must be an Image element.

Params:

Name	Type	Attribute	Description
newSrc			the path of the image

Returns:

void

DEBUG BUTTON NOT FOR PRODUCTION : toggle JSDoc record visibility

  {
    "comment": "/**\n * A texture of a [playing] Video.\n *\n * Video base textures mimic Pixi BaseTexture.from.... method in their creation process.\n *\n * This can be used in several ways, such as:\n *\n * ```js\n * let texture = PIXI.VideoBaseTexture.fromUrl('http://mydomain.com/video.mp4');\n *\n * let texture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://mydomain.com/video.mp4', mime: 'video/mp4' });\n *\n * let texture = PIXI.VideoBaseTexture.fromUrls(['/video.webm', '/video.mp4']);\n *\n * let texture = PIXI.VideoBaseTexture.fromUrls([\n *     { src: '/video.webm', mime: 'video/webm' },\n *     { src: '/video.mp4', mime: 'video/mp4' }\n * ]);\n * ```\n *\n * See the [\"deus\" demo](http://www.goodboydigital.com/pixijs/examples/deus/).\n *\n * @class\n * @extends PIXI.BaseTexture\n * @memberof PIXI\n */",
    "meta": {
        "range": [
            986,
            8274
        ],
        "filename": "VideoBaseTexture.js",
        "lineno": 34,
        "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
        "code": {
            "id": "astnode100045299",
            "name": "VideoBaseTexture",
            "type": "ClassDeclaration",
            "paramnames": [
                "source",
                "scaleMode"
            ]
        }
    },
    "classdesc": "
A texture of a [playing] Video.
\n
Video base textures mimic Pixi BaseTexture.from.... method in their creation process.
\n
This can be used in several ways, such as:
\n
let texture = PIXI.VideoBaseTexture.fromUrl('http://mydomain.com/video.mp4');\n\nlet texture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://mydomain.com/video.mp4', mime: 'video/mp4' });\n\nlet texture = PIXI.VideoBaseTexture.fromUrls(['/video.webm', '/video.mp4']);\n\nlet texture = PIXI.VideoBaseTexture.fromUrls([\n    { src: '/video.webm', mime: 'video/webm' },\n    { src: '/video.mp4', mime: 'video/mp4' }\n]);
See the "deus" demo.
",
    "kind": "class",
    "augments": [
        "PIXI.BaseTexture"
    ],
    "memberof": "PIXI",
    "name": "VideoBaseTexture",
    "longname": "PIXI.VideoBaseTexture",
    "scope": "static",
    "params": [
        {
            "type": {
                "names": [
                    "HTMLVideoElement"
                ]
            },
            "description": "
Video source
",
            "name": "source"
        },
        {
            "type": {
                "names": [
                    "number"
                ]
            },
            "optional": true,
            "defaultvalue": "PIXI.settings.SCALE_MODE",
            "description": "
See {@link PIXI.SCALE_MODES} for possible values
",
            "name": "scaleMode"
        }
    ],
    "___id": "T000002R004160",
    "___s": true,
    "$methods": [
        {
            "comment": "/**\n     * Returns true if the underlying source is playing.\n     *\n     * @private\n     * @return {boolean} True if playing.\n     */",
            "meta": {
                "range": [
                    2936,
                    3122
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 98,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045480",
                    "name": "VideoBaseTexture#_isSourcePlaying",
                    "type": "MethodDefinition",
                    "paramnames": []
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Returns true if the underlying source is playing.
",
            "access": "private",
            "returns": [
                {
                    "type": {
                        "names": [
                            "boolean"
                        ]
                    },
                    "description": "
True if playing.
"
                }
            ],
            "name": "_isSourcePlaying",
            "longname": "PIXI.VideoBaseTexture#_isSourcePlaying",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "scope": "instance",
            "params": [],
            "___id": "T000002R004173",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexture_isSourcePlaying",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Returns true if the underlying source is ready for playing.\n     *\n     * @private\n     * @return {boolean} True if ready.\n     */",
            "meta": {
                "range": [
                    3274,
                    3379
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 111,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045514",
                    "name": "VideoBaseTexture#_isSourceReady",
                    "type": "MethodDefinition",
                    "paramnames": []
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Returns true if the underlying source is ready for playing.
",
            "access": "private",
            "returns": [
                {
                    "type": {
                        "names": [
                            "boolean"
                        ]
                    },
                    "description": "
True if ready.
"
                }
            ],
            "name": "_isSourceReady",
            "longname": "PIXI.VideoBaseTexture#_isSourceReady",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "scope": "instance",
            "params": [],
            "___id": "T000002R004175",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexture_isSourceReady",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Runs the update loop when the video is ready to play\n     *\n     * @private\n     */",
            "meta": {
                "range": [
                    3484,
                    3846
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 121,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045534",
                    "name": "VideoBaseTexture#_onPlayStart",
                    "type": "MethodDefinition",
                    "paramnames": []
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Runs the update loop when the video is ready to play
",
            "access": "private",
            "name": "_onPlayStart",
            "longname": "PIXI.VideoBaseTexture#_onPlayStart",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "scope": "instance",
            "params": [],
            "___id": "T000002R004176",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexture_onPlayStart",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Fired when a pause event is triggered, stops the update loop\n     *\n     * @private\n     */",
            "meta": {
                "range": [
                    3959,
                    4126
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 141,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045577",
                    "name": "VideoBaseTexture#_onPlayStop",
                    "type": "MethodDefinition",
                    "paramnames": []
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Fired when a pause event is triggered, stops the update loop
",
            "access": "private",
            "name": "_onPlayStop",
            "longname": "PIXI.VideoBaseTexture#_onPlayStop",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "scope": "instance",
            "params": [],
            "___id": "T000002R004178",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexture_onPlayStop",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Fired when the video is loaded and ready to play\n     *\n     * @private\n     */",
            "meta": {
                "range": [
                    4227,
                    4983
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 155,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045601",
                    "name": "VideoBaseTexture#_onCanPlay",
                    "type": "MethodDefinition",
                    "paramnames": []
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Fired when the video is loaded and ready to play
",
            "access": "private",
            "name": "_onCanPlay",
            "longname": "PIXI.VideoBaseTexture#_onCanPlay",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "scope": "instance",
            "params": [],
            "___id": "T000002R004180",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexture_onCanPlay",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Destroys this texture\n     *\n     */",
            "meta": {
                "range": [
                    5041,
                    5355
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 189,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045700",
                    "name": "VideoBaseTexture#destroy",
                    "type": "MethodDefinition",
                    "paramnames": []
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Destroys this texture
",
            "name": "destroy",
            "longname": "PIXI.VideoBaseTexture#destroy",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "scope": "instance",
            "params": [],
            "overrides": "PIXI.BaseTexture#destroy",
            "___id": "T000002R004185",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexturedestroy",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Mimic Pixi BaseTexture.from.... method.\n     *\n     * @static\n     * @param {HTMLVideoElement} video - Video to create texture from\n     * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values\n     * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture\n     */",
            "meta": {
                "range": [
                    5697,
                    6098
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 213,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045750",
                    "name": "VideoBaseTexture.fromVideo",
                    "type": "MethodDefinition",
                    "paramnames": [
                        "video",
                        "scaleMode"
                    ]
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Mimic Pixi BaseTexture.from.... method.
",
            "scope": "static",
            "params": [
                {
                    "type": {
                        "names": [
                            "HTMLVideoElement"
                        ]
                    },
                    "description": "
Video to create texture from
",
                    "name": "video"
                },
                {
                    "type": {
                        "names": [
                            "number"
                        ]
                    },
                    "optional": true,
                    "defaultvalue": "PIXI.settings.SCALE_MODE",
                    "description": "
See {@link PIXI.SCALE_MODES} for possible values
",
                    "name": "scaleMode"
                }
            ],
            "returns": [
                {
                    "type": {
                        "names": [
                            "PIXI.VideoBaseTexture"
                        ]
                    },
                    "description": "
Newly created VideoBaseTexture
"
                }
            ],
            "name": "fromVideo",
            "longname": "PIXI.VideoBaseTexture.fromVideo",
            "kind": "function",
            "memberof": "PIXI.VideoBaseTexture",
            "___id": "T000002R004186",
            "___s": true,
            "skip": true,
            "slug": "PIXI.VideoBaseTexture.fromVideo",
            "filepath": "core\\textures\\VideoBaseTexture.js"
        },
        {
            "comment": "/**\n     * Helper function that creates a new BaseTexture based on the given video element.\n     * This BaseTexture can then be used to create a texture\n     *\n     * @static\n     * @param {string|object|string[]|object[]} videoSrc - The URL(s) for the video.\n     * @param {string} [videoSrc.src] - One of the source urls for the video\n     * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified\n     *  the url's extension will be used as the second part of the mime type.\n     * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values\n     * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture\n     */",
            "meta": {
                "range": [
                    6789,
                    7510
                ],
                "filename": "VideoBaseTexture.js",
                "lineno": 243,
                "path": "C:\\Users\\beaujeup\\projects\\jsdoc-template\\examples\\pixi.js\\pixi.js-repo\\src\\core\\textures",
                "code": {
                    "id": "astnode100045801",
                    "name": "VideoBaseTexture.fromUrl",
                    "type": "MethodDefinition",
                    "paramnames": [
                        "videoSrc",
                        "scaleMode"
                    ]
                },
                "vars": {
                    "": null
                }
            },
            "description": "
Helper function that creates a new BaseTexture based on the given video element.
This BaseTexture can then be used to create a texture
",
            "scope": "static",
            "params": [
                {
                    "type": {
                        "names": [
                            "string",
                            "object",
                            "Array.",
                            "Array.