Skip to main content

Video Textures

Try it from the Editor in the tutorial project.

This project creates a texture and runtime, downloads and plays a video file and renders the video into the texture. This texture is then applied to a model and used in the scene.

This script performs the following functions:

  • Create new Texture
  • Create an HTML Video element and play the video
  • Apply the new texture to the material on the TV model
  • Update the texture with video data every frame
var VideoTexture = pc.createScript('videoTexture');

VideoTexture.attributes.add('videoAsset', {
title: 'Video Asset',
description: 'MP4 video asset to play back on this video texture.',
type: 'asset'

VideoTexture.attributes.add('videoUrl', {
title: 'Video Url',
description: 'URL to use if there is video asset selected',
type: 'string'

VideoTexture.attributes.add('playEvent', {
title: 'Play Event',
description: 'Event that is fired as soon as the video texture is ready to play.',
type: 'string',
default: ''

// initialize code called once per entity
VideoTexture.prototype.initialize = function() {
var app =;

// Create HTML Video Element to play the video
var video = document.createElement('video');
video.loop = true;

// muted attribute is required for videos to autoplay
video.muted = true;

// critical for iOS or the video won't initially play, and will go fullscreen when playing
video.playsInline = true;

// needed because the video is being hosted on a different server url
video.crossOrigin = "anonymous";

// autoplay the video
video.autoplay = true;

// iOS video texture playback requires that you add the video to the DOMParser
// with at least 1x1 as the video's dimensions
var style =;
style.width = '1px';
style.height = '1px';
style.position = 'absolute';
style.opacity = '0';
style.zIndex = '-1000';
style.pointerEvents = 'none';


// Create a texture to hold the video frame data
this.videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R8_G8_B8,
magFilter: pc.FILTER_LINEAR,
mipmaps: true

video.addEventListener('canplaythrough', function (e) {, this.videoTexture);;

// set video source
video.src = this.videoAsset ? this.videoAsset.getFileUrl() : this.videoUrl;


this.on('destroy', function() {
}, this);

// update code called every frame
VideoTexture.prototype.update = function(dt) {
// Transfer the latest video frame to the video texture