Class: VideoBaseTexture

PIXI. 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.

new PIXI.VideoBaseTexture(source, scaleMode)

core/textures/VideoBaseTexture.js, line 33

Name	Type	Default	Description
`source`	HTMLVideoElement		Video source
`scaleMode`	number	PIXI.settings.SCALE_MODE	optional See PIXI.SCALE_MODES for possible values

Extends

PIXI.BaseTexture

Members

autoPlayboolean

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.

Default Value:

true

autoUpdateboolean

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

readonlyhasLoadedboolean

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.

readonlyheightnumber

The height of the base texture set when the image has loaded

readonlyimageTypestring

Type of image defined in source, eg. png or svg

imageUrlstring

The image url of the texture

readonlyisLoadingboolean

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.

mipmapboolean

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

See:

PIXI.MIPMAP_TEXTURES

readonlyorigSourceImage

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.

premultipliedAlphaboolean

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.

Default Value:

true

readonlyrealHeightnumber

Used to store the actual height of the source of this texture

readonlyrealWidthnumber

Used to store the actual width of the source of this texture

resolutionnumber

The resolution / device pixel ratio of the texture

Default Value:

scaleModenumber

The scale mode to apply when scaling this texture

Default Value:

PIXI.settings.SCALE_MODE

See:

PIXI.SCALE_MODES

readonlysourceHTMLImageElement HTMLCanvasElement

The image source that is used to create the texture.

TODO: Make this a setter that calls loadSource();

readonlysourceScalenumber

Scale for source image. Used with Svg images to scale them before rasterization.

readonlywidthnumber

The width of the base texture set when the image has loaded

wrapModenumber

WebGL Texture wrap mode

See:

PIXI.WRAP_MODES

Methods

staticPIXI.VideoBaseTexture.fromUrl(videoSrc, scaleMode){PIXI.VideoBaseTexture} core/textures/VideoBaseTexture.js, line 242

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

Name Type Description

videoSrc

string | object | Array.<string> | Array.<object>

The URL(s) for the video.

Name	Type	Description
`src`	string	optional One of the source urls for the video
`mime`	string	optional 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

number

See PIXI.SCALE_MODES for possible values

Returns:

Type	Description
PIXI.VideoBaseTexture	Newly created VideoBaseTexture

staticPIXI.VideoBaseTexture.fromVideo(video, scaleMode){PIXI.VideoBaseTexture} core/textures/VideoBaseTexture.js, line 212

Mimic Pixi BaseTexture.from.... method.

Name	Type	Default	Description
`video`	HTMLVideoElement		Video to create texture from
`scaleMode`	number	PIXI.settings.SCALE_MODE	optional See PIXI.SCALE_MODES for possible values

Returns:

Type	Description
PIXI.VideoBaseTexture	Newly created VideoBaseTexture

inherited _loadSvgSource() core/textures/BaseTexture.js, line 429

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

inherited _loadSvgSourceUsingDataUri(dataUri) core/textures/BaseTexture.js, line 455

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

Name	Type	Description
`dataUri`	string	The data uri to load from.

inherited _loadSvgSourceUsingString(svgString) core/textures/BaseTexture.js, line 514

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.

Name	Type	Description
`svgString`	string	SVG source as string

Fires:

event:loaded

inherited _loadSvgSourceUsingXhr() core/textures/BaseTexture.js, line 478

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

inherited _updateImageType() core/textures/BaseTexture.js, line 390

Updates type of the source image.

destroy() core/textures/VideoBaseTexture.js, line 188

Destroys this texture

inherited dispose() core/textures/BaseTexture.js, line 607

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.

inherited protectedloadSource(source) core/textures/BaseTexture.js, line 267

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)
}

Name	Type	Description
`source`	HTMLImageElement \| HTMLCanvasElement	the source object of the texture.

inherited update() core/textures/BaseTexture.js, line 229

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

Fires:

event:update

inherited updateSourceImage(newSrc) core/textures/BaseTexture.js, line 618

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

Name	Type	Description
`newSrc`	string	the path of the image

Events

inherited error core/textures/BaseTexture.js, line 215

Fired when a not-immediately-available source fails to load.

inherited loaded core/textures/BaseTexture.js, line 207

Fired when a not-immediately-available source finishes loading.