Hello everyone, I am having a big problem. I am using this example and what I am trying to achieve is to have multiple videos with play and stop buttons. this is what i have so far:
var Video4Floor = pc.createScript('video4Floor');
Video4Floor.attributes.add('video', {
title: 'Video',
array: true,
description: 'MP4 video asset to play back on this video texture.',
type: 'asset'
});
Video4Floor.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
Video4Floor.prototype.initialize = function() {
var app = this.app;
console.log(this.video);
console.log(this.video2);
// Create HTML Video Element to play the video
this.videoplayer = document.createElement('video');
this.videoplayer.loop = true;
// muted attribute is required for videos to autoplay
//this.videoplayer.muted = true;
// critical for iOS or the video won't initially play, and will go fullscreen when playing
this.videoplayer.playsInline = true;
// needed because the video is being hosted on a different server url
this.videoplayer.crossOrigin = "anonymous";
// iOS video texture playback requires that you add the video to the DOMParser
// with at least 1x1 as the video's dimensions
var style = this.videoplayer.style;
style.width = '1px';
style.height = '1px';
style.position = 'absolute';
style.opacity = '0';
style.zIndex = '-1000';
style.pointerEvents = 'none';
document.body.appendChild(this.videoplayer);
// Create a texture to hold the video frame data
this.video4Floor = 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.video4Floor.setSource(this.videoplayer);
this.videoplayer.addEventListener('canplaythrough', function (e) {
app.fire(this.playEvent, this.video4Floor);
}.bind(this));
// set video source
//this.videoplayer.src = this.video[1] ? this.video[1].getFileUrl() : this.videoUrl;
document.body.appendChild(this.videoplayer);
this.videoplayer.load();
};
Video4Floor.prototype.playVideo4Floor = function () {
// this.videoplayer.currentTime = 0;
this.videoplayer.play();
};
Video4Floor.prototype.stopVideo = function () {
this.videoplayer.pause();
this.videoplayer.currentTime = 0;
};
// update code called every frame
Video4Floor.prototype.update = function(dt) {
// Transfer the latest video frame to the video texture
this.video4Floor.upload();
/* if(this.app.keyboard.isPressed(pc.KEY_ESCAPE)){
this.stopVideo();
}
if(this.app.keyboard.isPressed(pc.KEY_SPACE)){
this.playVideo4Floor();
}
*/
};
Video4Floor.prototype.changeVideo00 = function() {
this.videoplayer.src = this.video[0] ? this.video[0].getFileUrl() : this.videoUrl;
};
Video4Floor.prototype.changeVideo01 = function() {
this.videoplayer.src = this.video[1] ? this.video[1].getFileUrl() : this.videoUrl;
};
My problem is that both planes where I project the video, play the same video. It doesn’t matter that you assign a video to one and a different one to the other, they always play the same one. In the script I put an arrangement of videos to be able to load as an attribute, in a plane I choose one only and in another a different one, however it always reproduces the same in both panels.
Heres a video of the problem:
I’m not very good at programming, try many alternatives, duplicate the scripts and assign different names to all the functions and variables, also duplicate the material that is assigned and the same thing continues to happen: / Thanks for any kind of help!
