Hi there!
Ive a question about a warning i receive and im not sure how to avoid it. Im using a videoTexture to visualize differend videos in my scene. Basically im using the basic videoTexture.js script provided by PlayCanvas. I extended it with a function, which receives other video assets. The weird thing is, that this basically works - the videos are switching. But in the console i get the warning mentioined in the header.
The script:
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: ''
});
var video;
// initialize code called once per entity
VideoTexture.prototype.initialize = function() {
var app = this.app;
// Create HTML Video Element to play the video
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 = video.style;
style.width = '1px';
style.height = '1px';
style.position = 'absolute';
style.opacity = '0';
style.zIndex = '-1000';
style.pointerEvents = 'none';
document.body.appendChild(video);
// Create a texture to hold the video frame data
this.videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R8_G8_B8,
minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
magFilter: pc.FILTER_LINEAR,
addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE,
mipmaps: true
});
this.videoTexture.setSource(video);
video.addEventListener('canplaythrough', function (e) {
app.fire(this.playEvent, this.videoTexture);
video.play();
}.bind(this));
// set video source
video.src = this.videoAsset ? this.videoAsset.getFileUrl() : this.videoUrl;
document.body.appendChild(video);
video.load();
this.on('destroy', function() {
this.videoTexture.destroy();
video.remove();
}, this);
};
VideoTexture.prototype.setVideoSource = function(source) {
if (video) {
// Set the new video source and load it
video.src = source;
} else {
console.error('Video element not found!');
}
};
// update code called every frame
VideoTexture.prototype.update = function(dt) {
// Check if videoTexture is defined before calling upload
if (this.videoTexture) {
// Transfer the latest video frame to the video texture
this.videoTexture.upload();
}
};
// dacia test video: https://storage.googleapis.com/varycon-prod/data_c10fd916-2472-4807-8bad-a93c048471c4.mp4
Now the question: Have i foget something in terms of loading / switching the video asset? May i have to unload something. The error appears multiple times, when loading a new video asset within the set videoSource Function.
Basically im wondering, whats the best practise to load another video asset and things i would have to pay attention for for the current video asset processing. Im sure the way i do it isnt clean (obviously) - if im right, the:
video.addEventListener('canplaythrough', function (e) {
app.fire(this.playEvent, this.videoTexture);
video.play();
}.bind(this));
Handles the video loading and replay, if buffered - so i only load a new video asset within the setVideoSource Function - which works every time i change the video source…so im not sure why i get the “no video” warning. (it also isnt called multiple times, so why is the warning triggered multiple times?)
Thanks for your inputs / support!